update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>

zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md

@@ -59,12 +59,9 @@
 ```html
 <!-- xxx.hml -->
 <div class="container">
-    <text>slider start value is {{ startValue }}</text>
-    <text>slider current value is {{ currentValue }}</text>
-    <text>slider end value is {{ endValue }}</text>
-    <text>slider change {{ mode }}</text>
-    <slider min="0" max="100" value="{{ value }}" onchange="setvalue" mode="outset" showtips="true"></slider>
-    <slider min="0" max="100" value="{{ value }}" onchange="setvalue" showsteps="true" step="20" mode="inset"  showtips="false"></slider>
+    <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
+    <slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset"  showtips="true"></slider>
+    <slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset"  showtips="false"></slider>
 </div>
 ```
 
@@ -75,43 +72,12 @@
     justify-content: center;
     align-items: center;
 }
-slider {
-    color: red;
-    selected-color: blue;
-    block-color: forestgreen;
-    height: 50px;
+slider{
+    margin-top: 100px;
 }
 ```
 
-```js
-// xxx.js
-export default {
-    data: {
-        value: 0,
-        startValue: 0,
-        currentValue: 0,
-        endValue: 0,
-        mode: "start"
-    },
-    setvalue(e) {
-        if (e.mode == "start") {
-            this.value = e.value;
-            this.startValue = e.value;
-        } else if (e.mode == "move") {
-            this.value = e.value;
-            this.currentValue = e.value;
-        } else if (e.mode == "end") {
-            this.value = e.value;
-            this.endValue = e.value;
-        } else if (e.mode == "click") {
-            this.value = e.value;
-            this.currentValue = e.value;
-        }
-        this.mode = e.mode;
-    }
-}
-```
 
-![zh-cn_image_0000001173324709](figures/slider.gif)
+![zh-cn_image_0000001173324709](figures/slider.png)
 
 

zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md

@@ -64,24 +64,24 @@
 <!-- xxx.hml -->
 <div class="container">
     <stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
-             onfinish="finish" onskip="skip">
-        <stepper-item class="stepperItem" label="{{ label_1 }}">
-            <div class="stepperItemContent">
-                <text>First screen</text>
+             onfinish="finish" onskip="skip" style="height : 100%;">
+        <stepper-item class="stepper-item" label="{{ label_1 }}">
+            <div class="item">
+                <text>Page One</text>
+                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
             </div>
-            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
-        <stepper-item class="stepperItem" label="{{ label_2 }}">
-            <div class="stepperItemContent">
-                <text>Second screen</text>
+        <stepper-item class="stepper-item" label="{{ label_2 }}">
+            <div class="item">
+                <text>Page Two</text>
+                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
             </div>
-            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
-        <stepper-item class="stepperItem" label="{{ label_3 }}">
-            <div class="stepperItemContent">
-                <text>Third screen</text>
+        <stepper-item class="stepper-item" label="{{ label_3 }}">
+            <div class="item">
+                <text>Page Three</text>
+                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
             </div>
-            <button type="capsule" class="button" value="setRightButtonStatus" onclick="setRightButton"></button>
         </stepper-item>
     </stepper>
 </div>
@@ -90,26 +90,40 @@
 ```css
 /* xxx.css */
 .container {
-    margin-top: 20px;
     flex-direction: column;
     align-items: center;
-    height: 300px;
+    height: 100%;
+    width: 100%;
+    background-color: #f7f7f7;
 }
-
-.stepperItem {
+.stepper{
     width: 100%;
+    height: 100%;
+}
+.stepper-item {
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
 }
-
-.stepperItemContent {
-    font-size: 50px;
-    justify-content: center;
+.item{
+    width: 90%;
+    height: 86%;
+    margin-top: 80px;
+    background-color: white;
+    border-radius: 60px;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 160px;
+}
+text {
+    font-size: 78px;
+    color: #182431;
+    opacity: 0.4;
 }
-
 .button {
-    width: 60%;
-    margin-top: 30px;
+    width: 40%;
+    margin-top: 100px;
     justify-content: center;
 }
 ```
@@ -174,4 +188,4 @@ export default {
 }
 ```
 
-![zh-cn_image_0000001127125114](figures/stepper.gif)
+![](figures/stepper.gif)