小程序 slider 双向滑动-蒲公英云

先上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。

直接上代码，小程序暂时不支持slider双向滑动，所以把两个slider拼起来用

<view class='sliderHCon'>
  <view class='showMoney'>
    <text class='MoneyValue'>￥{
   {min}}</text>
    <text class='MoneyValue'>￥{
   {max}}</text>
  </view>
  <view class='twoSlider'>
    <view class='select-construct'>
      <view class='select-area'>
        <view class='slider-container'>
          <view class='leftSliderPrice sliderPrice' style='left:{
   {leftSliderPriceWidthX}};'>
            <view class='sliderView'>
              ￥{
   {slider1Value*scale}}
            </view>
          </view>
          <slider style='width:{
   {slider1W+"%"}}' class='slider-left' min='{
   {min}}' max='{
   {slider1Max}}' color='#FFAC30'
          selected-color='#e5e5e5' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='1'></slider>
          <view class='rightSliderPrice sliderPrice' style='right:{
   {rightSliderPriceWidthX}};'>
            <view class='sliderView'>
              ￥{
   {slider2Value*scale}}
            </view>
          </view>
          <slider wx:if='{
   {!change}}' style='width:{
   {slider2W+"%"}}' class='slider-right' min='{
   {slider2Min}}' max='{
   {max}}' color='#e5e5e5'
           selected-color='#FFAC30' bindchanging='changing'catchtouchstart='changeStart'  bindchange='changed' data-idx='2'></slider>
        </view>
      </view>
    </view>
  </view>
</view>
.sliderHCon {
  height: 250rpx;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.MoneyValue {
  font-size: 22rpx;
  text-align: center;
  color: #666;
  margin-top: 15rpx;
}
.showMoney {
  display: flex;
  justify-content: space-between;
  width: 68%;
  margin-top: -34px;
  position: absolute;
  color: #666;
  font-size: 22rpx;
}
.showMoney text {
  margin-right: -67rpx;
}
.twoSlider {
  width: 93%;
  height:100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.twoSlider .leftSliderPrice {
  position: absolute;
  top: -34rpx;
  left: 0;
  width: 100rpx;
  height: 60rpx;
  line-height: 40rpx;
  padding: 20rpx;
  text-align: center;
  color: #FFF;
}
.sliderPrice view {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  font-size: 22rpx;
}
.twoSlider .rightSliderPrice {
  position: absolute;
  top: -34rpx;
  right: 0;
  width: 100rpx;
  height: 60rpx;
  line-height: 40rpx;
  padding: 20rpx;
  text-align: center;
  color: #FFF;
}
.sliderView {
  border: solid red 1rpx;
  color: red;
}
/* 滑动样式 */
.select-construct{
  width: 100%;
}
.select-area{
  width: 80%;
  padding: 30px 10% 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slider-container{
  width: 100%;
  display: flex;
  padding: 20px 0 10px;
  position: relative;
}
.slider-left,.slider-right{
  margin-right: -8rpx;
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    change: false, // 当两个slider在最右端重合时，将change设置为true，从而隐藏slider2，才能继续操作slider1
    max: 10000, // 两个slider所能达到的最大值
    min: 0, // 两个slider所能取的最小值
    rate: 100, // slider的最大最小值之差和100（或1000）之间的比率
    scale: 1, // 比例系数。页面显示值的时候，需要将slider1Value(slider2Value)乘以比例系数scale
    slider1Max: 10000, // slider1的最大取值
    slider1Value: 0, // slider1的值
    slider2Value: 10000, // slider2的值
    slider2Min: 0, // slider2的最小取值
    slider1W: 100, // slider1的宽度
    slider2W: 0, // slider2的宽度
    leftSliderPriceWidthX: '-1.5%',
    rightSliderPriceWidthX: '-21%'
  },
  // 开始滑动
  changeStart: function (e) {
    var idx = parseInt(e.currentTarget.dataset.idx)
    if (idx === 1) {
      // dW是当前操作的slider所能占据的最大宽度百分数
      var dW = (this.data.slider2Value - this.data.min) / this.data.rate
      this.setData({
        slider1W: dW,
        slider2W: 100 - dW,
        slider1Max: this.data.slider2Value,
        slider2Min: this.data.slider2Value,
        change: false
      })
    } else if (idx === 2) {
      var dw = (this.data.max - this.data.slider1Value) / this.data.rate
      this.setData({
        slider2W: dw,
        slider1W: 100 - dw,
        slider1Max: this.data.slider1Value,
        slider2Min: this.data.slider1Value,
        change: false
      })
    }
  },
  // 正在滑动
  changing: function (e) {
    var idx = parseInt(e.currentTarget.dataset.idx)
    var value = e.detail.value
    let rightSliderPriceWidthX = (this.data.max-value)/116-21
    let leftSliderPriceWidthX = value/116
    if (idx === 1) {
      this.setData({
        slider1Value: value,
        leftSliderPriceWidthX:leftSliderPriceWidthX+'%'
      })
    } else if (idx === 2) {
      this.setData({
        slider2Value: value,
        rightSliderPriceWidthX: rightSliderPriceWidthX+'%'
      })
    }
  },
  changed: function (e) {
    if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.max) {
      this.setData({
        change: true
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})