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

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

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代码：

      
      
        
          
            {{item}}
          
        
      

      
      
        
      

      
      
        
          
          
        
      
    

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计算这块了。