This topic describes the scroll selector, that is, slider.
Attribute | Type | Default value | Description | Minimum version |
name | String | - | The component name, which is used to submit the form to obtain data. | - |
min | Number | 0 | The minimum value. | - |
max | Number | 100 | The maximum value. | - |
step | Number | 1 | The step size, whose value must be greater than 0 and can be divisible by (max-min). | - |
disabled | Boolean | false | Whether to disable the button. | - |
value | Number | 0 | The current value. | - |
show-value | Boolean | false | Whether to display the current value. | - |
active-color | String | #108ee9 | The selected color. | - |
background-color | String | #ddd | The color of the background bar. | - |
track-size | Number | 4 | The height of the track line, in px. | - |
handle-size | Number | 22 | The height of the track line, in px. | - |
handle-color | String | #fff | The filling color of the slider. | - |
onChange | EventHandle | - | Trigger when a drag is completed, where | - |
onChanging | EventHandle | - | The event triggered during the drag, where |
Code sample
<view class="section section-gap">
<text class="section-title">Set step.</text>
<view class="body-view">
<slider value="60" onChange="sliderChange" step="5"/>
</view>
</view>
<view class="section section-gap">
<text class="section-title">Display the current value.</text>
<view class="body-view">
<slider value="50" show-value/>
</view>
</view>
<view class="section section-gap">
<text class="section-title">Set the minimum or 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">The 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('The changed slider value:', e.detail.value)
})