3-5 slider组件

slider

基础库 1.0.0 开始支持，低版本需做兼容处理。

滑动选择器。

属性	类型	默认值	必填	说明	最低版本
min	number	0	否	最小值	1.0.0
max	number	100	否	最大值	1.0.0
step	number	1	否	步长，取值必须大于 0，并且可被(max - min)整除	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
value	number	0	否	当前取值	1.0.0
color	color	#e9e9e9	否	背景条的颜色（请使用 backgroundColor）	1.0.0
selected-color	color	#1aad19	否	已选择的颜色（请使用 activeColor）	1.0.0
activeColor	color	#1aad19	否	已选择的颜色	1.0.0
backgroundColor	color	#e9e9e9	否	背景条的颜色	1.0.0
block-size	number	28	否	滑块的大小，取值范围为 12 - 28	1.9.0
block-color	color	#ffffff	否	滑块的颜色	1.9.0
show-value	boolean	false	否	是否显示当前 value	1.0.0
bindchange	eventhandle		否	完成一次拖动后触发的事件，event.detail = {value}	1.0.0
bindchanging	eventhandle		否	拖动过程中触发的事件，event.detail = {value}	1.7.0

示例代码

在开发者工具中预览效果

<view class="section section_gap">
  <text class="section__title">设置step</text>
  <slider bindchange="slider2change" step="10" />
</view>

<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <slider 
  bindchanging="slider3change" 
  show-value 
  block-size="28"
  block-color="#19A15F"
  />
</view>

<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <slider 
  value='80'
  bindchange="slider4change" 
  min="50" max="200" 
  show-value 
  backgroundColor="#DD4F43"
  activeColor="#4C8CF5"
  block-size="12"
  block-color="#19A15F"
  />
</view>

Page({
  data: {
    
  },
  slider4change:function(e) {
    console.log(e);
  },

  slider3change: function (e) {
    console.log(e);
  },
  
  slider2change: function (e) {
    console.log(e);
  },
  
})

文本内容来自 ：https://developers.weixin.qq.com/miniprogram/dev/component/slider.html