微信小程序-双滑块组件_微信小程序实现拖动价格slider功能

先看效果：

组件 range-slider.wxml

 <view class='range-slider' style='width:{{width}}rpx;height:{{height}}rpx'>
  <view class='range-bar' style='width:100%;height:{{barHeight}}rpx'>
    <view class='range-bar-bg' style='background-color:{{backgroundColor}}'></view>
    <view class='range-bar-progress' style='margin-left:{{progressBarLeft}}rpx;width:{{progressBarWidth}}rpx;background-color:{{activeColor}}'></view>
  </view>
  <view class='block' style='width:{{blockSize}}rpx;height:{{blockSize}}rpx;margin-left:{{minBlockLeft}}rpx;' catch:touchstart='_onBlockTouchStart' catch:touchmove='_onBlockTouchMove' catch:touchend='_onBlockTouchEnd' data-left='{{minBlockLeft}}' data-tag='minBlock'>
    <slot name='minBlock'></slot>
  </view>
  <view class='block' style='width:{{blockSize}}rpx;height:{{blockSize}}rpx;margin-left:{{maxBlockLeft}}rpx;' catch:touchstart='_onBlockTouchStart' catch:touchmove='_onBlockTouchMove' catch:touchend='_onBlockTouchEnd' data-left='{{maxBlockLeft}}'
    data-tag='maxBlock'>
    <slot name='maxBlock'></slot>
  </view>
</view>

 组件range-slider.js

代码地址：https://gitee.com/yin_dong/weixinshuanghuakuai/tree/master/wechat-rangeslider-master

乐于分享，有需要的随便用，不像是某些***，不让看