微信小程序自定义slider组件实现双向滑块

实现效果：

zy-slider标签是封装的自定义组件
我放到了资源这里地址：https://download.csdn.net/download/Axiaoheng_/86399342?spm=1001.2014.3001.5503

wxml引入

 <view class="zy-slider">
	<zy-slider id="zy-slider"
	minValue="0" 
	maxValue="0" min="0" max="100"
	bind:lowValueChange="lowValueChangeAction" 
	bind:heighValueChange="heighValueChangeAction" />
</view>

{
  "usingComponents": {
      "zy-slider": "../../component/zyslider"
  }
}

参数	说明
min	Number/String slider 最小值
max	Number/String slider 最大值
minValue	Number/String slider 左边滑块初始位置
maxValue	Number/String slider 右边滑块初始位置
bind:lowValueChange	function 左边滑块回调 {lowValue：lowValue}
bind:heighValueChange	function 右边滑块回调 {heighValue：heighValue}

绑定方法

lowValueChangeAction: function (e) {
  this.setData({
    low:e.detail.lowValue
  })
},
heighValueChangeAction: function (e) {
    this.setData({
      heigh: e.detail.heighValue
    })
},

刻度线需要单独去写：

<view class="numList">
        <view class="num_tem" wx:for="{{[0,1,2,3,4,5,6,7]}}"></view>
</view>

css

.zy-slider {
  position: relative;
}
.numList{
  width: 100%;
  display: flex;
  justify-content: space-between;  
    flex-wrap: nowrap;
    padding: 0 44rpx 0rpx 34rpx;
    box-sizing: border-box;
    position: relative;
    top: 40rpx;
}
.numList .num_tem{
  background: #677a94;
  width: 2rpx;
  height: 10rpx;
}