Slider

Introduction

Slider is a sliding input component used for selecting values within a numerical range or a custom range.

Property Description

Field	Description	Type	Default
value	The selected value of the slider, can be bound using v-model.	Number	-
showLabel	Whether to display the label while dragging.	Boolean	FALSE
showLabelAlways	Whether to always display the label.	Boolean	FALSE
showRangeTxt	Whether to display the selectable range at both ends.	Boolean	FALSE
stage	The number of segments.	Number/String	-

Events

Name	Description	Callback Parameters
change	Triggered when sliding	value

Example

<view class="bg-white br4 pd16">
  <slider
    class="pd16"
    :range="range"
    stage="50"
    :value="sliderVal"
    :show-label="true"
    bind:change="handleSlideChange"
  ></slider>
  <view>{{sliderVal}}</view>
</view>

Page({
  data: {
    text: 'button',
    range: [0, 100],
    sliderVal: 10,
  },
  handleSlideChange(val) {
    this.setData({
      sliderVal: val,
    });
  },
});