滑动选择器（slider）。

属性名 类型 默认值 描述
name String - 组件名字，用于表单提交获取数据。
min Number 0 最小值
max Number 100 最大值
step Number 1 步长，值必须大于 0，并可被 (max - min) 整除。
disabled Boolean false 是否禁用。
value Number 0 当前取值。
show-value Boolean false 是否显示当前 value。
active-color String #108ee9 已选择的颜色。
background-color String #ddd 背景条的颜色。
track-size Number 4 轨道线条高度。
handle-size Number 22 滑块大小。
handle-color String #fff 滑块填充色。
onChange EventHandle - 完成一次拖动后触发。
event.detail = {value:value}
onChanging EventHandle - 拖动过程中触发的事件。
event.detail = {value:value}

图示

slider - 图1

代码示例

  1. <view class="section section-gap">
  2.   <text class="section-title">设置 step</text>
  3.   <view class="body-view">
  4.     <slider value="60" onChange="sliderChange" step="5"/>
  5.   </view>
  6. </view>
  7. <view class="section section-gap">
  8.   <text class="section-title">显示当前 value</text>
  9.   <view class="body-view">
  10.     <slider value="50" show-value/>
  11.   </view>
  12. </view>
  13. <view class="section section-gap">
  14.   <text class="section-title">设置最小/最大值</text>
  15.   <view class="body-view">
  16.     <slider value="100" min="50" max="200" show-value/>
  17.   </view>
  18. </view>
  19. <view class="page-section">
  20.   <view class="page-section-title">自定义样式</view>
  21.   <view class="page-section-demo">
  22.     <slider value="33" onChange="slider4change" min="25" max="50" show-value
  23.     backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
  24.   </view>
  25. </view>
  1. Page({
  2.   sliderChange(e) 
  3.     console.log('slider 改变后的值:', e.detail.value)
  4. })