slider

滑动选择器。

属性说明

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于 0，并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
activeColorColor各个平台不同，详见下滑块左侧已选择部分的线条颜色
backgroundColorColor#e9e9e9滑块右侧背景条的颜色
block-sizeNumber28滑块的大小，取值范围为 12 - 28
block-colorColor#ffffff滑块的颜色
show-valueBooleanfalse是否显示当前 value
@changeEventHandle完成一次拖动后触发的事件，event.detail = {value: value}
@changingEventHandle拖动过程中触发的事件，event.detail = {value: value}
Tips

  • activeColor默认值在不同平台不一样，微信是绿色(#1aad19)，头条是红色，其他平台是蓝色
  • 如需要区间滑块，即一根横条上使用2个滑块选择一段范围，可见插件市场示例
  1. <template>
  2.     <view>
  3.         <view class="uni-padding-wrap uni-common-mt">
  4.             <view class="uni-title">设置step</view>
  5.             <view>
  6.                 <slider value="60" @change="sliderChange" step="5" />
  7.             </view>
  9.             <view class="uni-title">显示当前value</view>
  10.             <view>
  11.                 <slider value="50" @change="sliderChange" show-value />
  12.             </view>
  14.             <view class="uni-title">设置最小/最大值</view>
  15.             <view>
  16.                 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
  17.             </view>
  19.             <view class="uni-title">不同颜色和大小的滑块</view>
  20.             <view>
  21.                 <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
  22.             </view>
  23.         </view>
  24.     </view>
  25. </template>
  1. export default {
  2.     data() {
  3.         return {}
  4.     },
  5.     methods: {
  6.         sliderChange(e) {
  7.             console.log('value 发生变化：' + e.detail.value)
  8.         }
  9.     }
  10. }

uniapp

示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/slider/slider

发现错误？想参与编辑？在 GitHub 上编辑此页面！