如何写一个滑块区间选择控件

最近要写一个滑块人数区间选择的控件，其实本来不算难，知识由于刚接触小程序，很多都语法不太熟所以花了点时间琢磨了下，具体效果看下面图： WechatIMG29.jpeg

整个滑块样式分为三部分，上面刻度，中间线条，下边滑块，所以只要对css样式熟练点就能写出来，另外需要监听滑块的move事件，代码如下：

wcss代码：

.content{
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-right: 30px;
}

.filter_content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.barview{
  display: flex;
  height: 30px;
  justify-content: center;
}

.bar{
  position: relative;
  width: 100%;
  height: 30px;
}

.btn1{
  position: absolute;
}

.person{
  display: flex;
  height: 30px;
  justify-content: center;
}

.line-img{
  background: gray;
  width: 100%;
  height: 1px;
}

.line{
  display: flex;
  justify-content: center;
}

.kedus{
  width: 24px;
  line-height: 50rpx;
  text-align: center;
  background-size: 24px 30px;
  padding-top: 5rpx;
}

.no_sel_text{
  color: gray;
  font-size: 12px;
}

.sel_text{
  color: #fff;
  font-size: 9px;
}

.kedu{
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative;
}

.kedu_img{
  width: 24px;
  height: 50rpx;
}

.showview{
  display: flex;
  justify-content: center;
}

.showtext{
  color: #ff0000;
}

wxml代码：

<view class='filter_content'>
      <!-- 刻度 -->
      <view class='person'>
        <view class='kedu'>
          <block wx:for="{{kedu}}" wx:key="{{index}}">
            <view class="kedus {{(index==start_index||index == end_index)?'sel_text':'no_sel_text'}}'"   style="background-image: url({{(index == start_index || index == end_index)?'http://p157c6vbr.bkt.clouddn.com/person_sel_point.svg':''}});">{{item}}</view>
          </block>
        </view>
      </view>

      <!-- 线条 -->
      <view class='line'>
        <image class='line-img'></image>
      </view>

      <!-- 滑动条 -->
      <view class='barview'>
        <view class='bar'>
          <image class='btn1' src="../../images/screen_number.svg" style="width:24px;height:30px; margin-left:{{ballLeft}}px;" bindtouchmove='movestart' bindtouchend='moveend'></image>
          <image class='btn1' src="../../images/screen_number.svg" style="width:24px;height:30px; right:{{ballLeft1}}px;" bindtouchmove='movestart1' bindtouchend='moveend1'></image>
        </view>
      </view>
    </view>

js代码：

  data: {
    screenHeight: null,
    screenWidth: null,
    ballLeft: 0,
    ballLeft1: 0,
    kedu: [1, 4, 6, 10, 12, 20, 50, 200, 300],
    kedutext1: 1,
    kedutext2: 300,
}
  onLoad: function (options) {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },


  movestart: function (e) {
    var touchs = e.touches[0];
    var pageX = touchs.pageX;
    var pageY = touchs.pageY;

    // //防止坐标越界,view宽高的一般  
    if (pageX < 0) return;
    if (pageX > this.data.screenWidth) return;

    //这里用right和bottom.所以需要将pageX pageY转换  
    var x = pageX;
    var y = pageY;
    var a = x / this.data.screenWidth;
    var index = parseInt(this.data.kedu.length * a);

    var ke = ((this.data.screenWidth - 60) - (this.data.kedu.length*24)) / (this.data.kedu.length - 1);
    var x1 = index * (ke+24);
    if (this.data.kedu[index] >= this.data.kedutext2 - 1){
    }else{
      this.setData({
        ballLeft: x1,
        kedutext1: this.data.kedu[index], 
        start_index: index
      });
    }
  },

  
  movestart1: function (e) {
    var touchs = e.touches[0];
    var pageX = touchs.pageX;
    var pageY = touchs.pageY;

    // //防止坐标越界,view宽高的一般  
    if (pageX < 0) return;
    if (pageX > this.data.screenWidth) return;
    //这里用right和bottom.所以需要将pageX pageY转换  
    var x = this.data.screenWidth - pageX;
    var y = this.data.screenHeight - pageY;
    var a = x / this.data.screenWidth;
    var index = parseInt(this.data.kedu.length * a);

    var ke = ((this.data.screenWidth - 60) - (this.data.kedu.length * 24)) / (this.data.kedu.length - 1);
    var x1 = index * (ke + 24);
    if (this.data.kedu[this.data.kedu.length - index - 1] <= this.data.kedutext1 + 1) {
    } else {
      this.setData({
        ballLeft1: x1,
        kedutext2: this.data.kedu[this.data.kedu.length - index - 1],
        end_index: this.data.kedu.length - index - 1
      });
    }
  },
  
  //块1滑动结束
  moveend:function(e){
    this.loadUIData();
  },

  //块2滑动结束
  moveend1: function (e) {
    this.loadUIData();
  },

因为没有写独立demo，所以没有把js代码整部分贴上来，不过核心代码就是movestart计算这块了。