diff --git a/pages/component/slider-100/slider-100.uvue b/pages/component/slider-100/slider-100.uvue
index 8edfb5334860ea822b7732d85c1823ee5b5b1a6f..f9f97da5d13bfa0378a3a2d823e6a09af37e7f91 100644
--- a/pages/component/slider-100/slider-100.uvue
+++ b/pages/component/slider-100/slider-100.uvue
@@ -1,21 +1,24 @@
 <template>
   <view class="uni-padding-wrap">
-    <page-head :title="title"></page-head>
+    <slider class="first-slider" @changing="sliderChanging" :value="sliderValue"
+      :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+      :show-value="true" />
     <view class="flex-row">
       <view class="flex-fill">
-        <view v-for="(_, index1) in 33" :key="index1">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
       <view class="flex-fill">
-        <view v-for="(_, index2) in 33" :key="index2">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
       <view class="flex-fill">
-        <view v-for="(_, index3) in 33" :key="index3">
-          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
-        </view>
+        <slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
+      </view>
+      <view class="flex-fill">
+        <slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
+          :block-size="sliderBlockSize" :show-value="true" />
       </view>
     </view>
   </view>
@@ -26,13 +29,16 @@
     data() {
       return {
         title: 'slider 滑块 x 100',
-        sliderValue: 0
+        sliderValue: 50,
+        sliderBlockSize: 20,
+        sliderBackgroundColor: '#000000',
+        sliderActiveColor: '#FFCC33',
+        sliderBlockColor: '#8A6DE9'
       }
     },
     methods: {
       sliderChanging(e : SliderChangeEvent) {
         this.sliderValue = e.detail.value
-        console.log('value 发生变化：' + e.detail.value)
       }
     }
   }
@@ -42,7 +48,17 @@
   .flex-row {
     flex-direction: row;
   }
+
   .flex-fill {
     flex: 1;
   }
-</style>
+
+  .first-slider {
+    margin: 12px 0;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .slider {
+    margin: 2px 0.5px;
+  }
+</style>
\ No newline at end of file