Slider

Property	Type	Default	Description	Minimum version
name	String	-	Component name, used to retrieve data on form submission.	-
min	Number	0	Minimum value.	-
max	Number	100	Maximum value.	-
step	Number	1	Step size. Must be greater than 0 and evenly divide (max - min).	-
disabled	Boolean	false	Whether the slider is disabled.	-
value	Number	0	Current value.	-
show-value	Boolean	false	Whether to display the current value.	-
active-color	String	#108ee9	Color of the selected portion of the track.	-
background-color	String	#ddd	Color of the unselected portion of the track.	-
track-size	Number	4	Track height, in px.	-
handle-size	Number	22	Handle size, in px.	-
handle-color	String	#fff	Fill color of the handle.	-
onChange	EventHandle	-	Triggered when a drag ends. event.detail = {value:value}	-
onChanging	EventHandle	-	Triggered continuously during a drag. event.detail = {value:value}	1.5.0

Preview

Sample code

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

<view class="section section-gap">
  <text class="section-title">Show current value</text>
  <view class="body-view">
    <slider value="50" show-value/>
  </view>
</view>

<view class="section section-gap">
  <text class="section-title">Set minimum/maximum value</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">Custom style</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 value changed:', e.detail.value)
})