slider

Slide selector

Scan QR code to try:

slider

Property

TypeDefaultDescription
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)
})