slider

Slider.

Example

bxml:

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">Set step</view>
      <view class="body-view">
        <slider
          value="{{60}}"
          bindchange="sliderChange"
          step="{{5}}"
          bindtap="sliderClick"
          onLongPress="sliderLonePress"
        ></slider>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">disabled</view>
      <view class="body-view">
        <slider
          value="{{60}}"
          bindchange="sliderChange"
          step="{{5}}"
          disabled
        ></slider>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">Display current value</view>
      <view class="body-view">
        <slider
          value="{{50}}"
          bindchange="sliderChange"
          show-value="{{true}}"
        ></slider>
      </view>
    </view>
    <view class="page-section page-section-gap">
      <view class="page-section-title">Set min/max value</view>
      <view class="body-view">
        <slider
          value="{{100}}"
          bindchange="sliderChange"
          min="{{50}}"
          max="{{200}}"
          show-value="{{true}}"
        ></slider>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">controlled</view>
      <view class="body-view">
        <slider
          value="{{controlledValue}}"
          bindchange="onControlledValueChange"
          min="{{50}}"
          max="{{200}}"
          show-value="{{true}}"
        />

        <slider
          value="{{controlledValue}}"
          bindchange="onControlledValueChange"
          min="{{50}}"
          max="{{200}}"
          show-value="{{true}}"
        />
      </view>
    </view>
  </view>

  <view style="margin: 24px;">
    normal Taroslider
    <slider />
  </view>
  <view style="position: relative;margin: 24; ">
    with position: relative
    <slider />
  </view>
</view>

js

Page({
   data: {
     controlledValue: 50
   },
   sliderChange(e) {
     console.log('slider fire change event，value:', e.detail.value)
   },
   sliderClick(e) {
     console.log('slider fire click event，value:', e.detail.value)
   },
   sliderLonePress(e) {
     console.log('slider fire lonePress event，value:', e.detail.value)
   },
   onControlledValueChange(e) {
     console.log('slider fire change event，value:', e.detail.value)
     this.setData({
       controlledValue: e.detail.value
     })
   }
 })

Props

Name	Type	Description	Default
min	number	Least value	0
max	number	Maximum value	100
step	number	Step size must be greater than 0 and can be(Max - Min) integer	1
disabled	boolean	Is it disabled?	false
value	number	Current value
show-value	boolean	Displays current value	false
active-color	string	Selected color	\var(--bnui-primay)``
background-color	string	Background Bar Color	"#e9e9e9"

Events

Name	Description
bindchange	bindchange Event triggered after completing a drag, event.detail = {value}
bindchanging	bindchaning Event triggered during drag, event. detail = {value}
bindtap	bindtap Event tap
bindtapcapture	bindtapcapture Event tap