如何实现滑动选择器slider_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍滑动选择器（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	轨道线条高度，单位为 px。	-
handle-size	Number	22	滑块大小，单位为 px。	-
handle-color	String	#fff	滑块填充色。	-
onChange	EventHandle	-	完成一次拖动后触发。`event.detail = {value:value}`	-
onChanging	EventHandle	-	拖动过程中触发的事件。`event.detail = {value:value}`	1.5.0

图示

代码示例

<view class="section section-gap">
  <text class="section-title">设置 step</text>
  <view class="body-view">
    <slider value="60" onChange="sliderChange" step="5"/>
  </view>
</view>

<view class="section section-gap">
  <text class="section-title">显示当前 value</text>
  <view class="body-view">
    <slider value="50" show-value/>
  </view>
</view>

<view class="section section-gap">
  <text class="section-title">设置最小/最大值</text>
  <view class="body-view">
    <slider value="100" min="50" max="200" show-value/>
  </view>
</view>

<view class="page-section">
  <view class="page-section-title">自定义样式</view>
  <view class="page-section-demo">
    <slider value="33" onChange="slider4change" min="25" max="50" show-value
    backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
  </view>
</view>

Page({
  sliderChange(e) 
    console.log('slider 改变后的值:', e.detail.value)
})