All Products
Search
Document Center

slider

Last Updated: Apr 19, 2021

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. -
handle-size Number 22 The size of the slider. -
handle-color String #fff The filling color of the slider. -
onChange EventHandle - Trigger when a drag is completed, where event.detail = {value: value}. -
onChanging EventHandle - The event triggered during the drag, where event.detail = {value: value}. 1.5.0

Illustration

Code sample

 
  1. <view class="section section-gap">
  2. <text class="section-title">Set 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">Display the current 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">Set the minimum or maximum value.</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">The custom style.</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('The changed slider value:', e.detail.value)
  4. })