<view class="tui-content"> <view class="tui-slider-head">設置step,當前設置步伐為5,當前值：{{slider1}}</view> <view class="tui-slider-box">  <slider bindchange="changeSlider1" step="5" value="{{slider1}}"/> </view></view><view class="tui-content"> <view class="tui-slider-head">是否在右側顯示當前值</view> <view class="tui-slider-box">  <slider bindchange="changeSlider2" value="{{slider2}}" show-value/> </view></view><view class="tui-content"> <view class="tui-slider-head">設置最大值、最小值</view> <view class="tui-slider-box">  <slider bindchange="changeSlider3" min="20" max="90" value="{{slider3}}" show-value/> </view></view><view class="tui-content"> <view class="tui-slider-head">滑動選擇器設置名稱</view> <view class="tui-slider-box">  <view class="tui-fl">   選擇  </view>  <view class="tui-fl">   {{slider4}}  </view>  <view style="overflow:hidden">   <slider bindchanging="changeSlider4" value="{{slider4}}"/>  </view> </view></view>

.tui-slider-head,.tui-slider-box{ height: 80rpx; line-height: 80rpx; font-size: 35rpx; color: #666;}

Page({ data: {  slider1: 50,  slider2: 50,  slider3: 50,  slider4: 50 }, changeSlider1(e) {  this.setData({ slider1: e.detail.value }) }, changeSlider2(e){  this.setData({ slider2: e.detail.value}) }, changeSlider3(e) {  this.setData({ slider3: e.detail.value }) }, changeSlider4(e) {  this.setData({ slider4: e.detail.value }) }})