slider

Slide selector.

Attribute NameTypeDefaultDescriptionMinimum Version
nameStringComponent name, used for form submission to obtain data
minNumber0minimum
maxNumber100maximum
stepNumber1step, must be greater than 0 and can be exactly divided by (max - min)
disabledBooleanfalsedisable or not
valueNumber0current value
show-valueBooleanfalseshow current value or not
active-colorString#108ee9selected color
background-colorString#dddbackground bar color
track-sizeNumber4track line height
handle-sizeNumber22slider size
handle-colorString#fffslider fill color
onChangeEventHandletrigger on completion of a drag, event.detail = {value: value}
onChangingEventHandleevent triggered in process of drag, event.detail = {value: value}

Screenshot

slider

Sample Code

copy
<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">Shown current value</text>
  <view class="body-view">
    <slider value="50" show-value/>
  </view>
</view>
<view class="section section-gap">
  <text class="section-title">Set mininum/maximum</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>
copy
Page({
  sliderChange(e) 
    console.log('slider changed value:', e.detail.value)
})