js实现h5滑动杆range功能

 

去网上找了圈可以手指拖动的滑竿来显示价格区间，奈何都是点击的，产品经理说不愿将就，没法，就只能给自己下手写一个来筛选价格。

1、确定杆上要有两个点。即价格区间的头和尾的价格分别为多少

2、每次滑动的最小步数，我们这是step=100

3、最大价格是多少

4、拖动原点返回当前的时间区间

 

手指按下的时候获取当前的横坐标

 

myRange.prototype.start = function (num, _this) {
    var ev = ev || event;
    if (num == 1) {
        this.initX1 = ev.targetTouches[0].pageX;
    } else {
        this.initX2 = ev.targetTouches[0].pageX;
    }
    this.zIndex++;
    $(_this).css('z-index', this.zIndex)
}

 

手指拖动，获取拖动的距离，并分别用disX保存起来

 

myRange.prototype.move = function (num) {
    var ev = ev || event;
    var moveX = ev.targetTouches[0].pageX;
    if (moveX >= this.min && moveX <= this.max) {
        if (num == 1) {
            this.endX1 = moveX;
            this.disX1 = (moveX - this.$lineOffsetLeft);
            this.setLineWinth(1, 'move')
        } else {
            this.endX2 = moveX;
            this.disX2 = (moveX - this.$lineOffsetLeft);
            this.setLineWinth(2, 'move')
        }
    }
}

手指抬起，计算当前距离是否为step的倍数，如果不是进行计算并取整，（分不同情况，是哪个圆点以及圆点拖动方向）

 

 

myRange.prototype.end = function (num) {
    if (num == 1) {
        if ((this.endX1 - this.initX1) > 0) {//右, 向上取整
            var v = (this.set.step - this.disX1 % this.set.step) + this.disX1;
            v <= this.rangeWidth ? this.disX1 = v : this.disX1 = this.rangeWidth;
            this.setLineWinth(1);
        } else {//左, 向下取整
            this.disX1 = (this.disX1 - this.disX1 % this.set.step);
            this.setLineWinth(1);
        }
    } else {
        if ((this.endX2 - this.initX2) > 0) {//右, 向上取整
            var v = (this.set.step - this.disX2 % this.set.step) + this.disX2;
            v <= this.rangeWidth ? this.disX2 = v : this.disX2 = this.rangeWidth;
            this.setLineWinth(2);
        } else {//左, 向下取整
            this.disX2 = this.disX2 - (this.disX2 % this.set.step);
            this.setLineWinth(2);
        }
    }
}

 

this.setLineWinth(2);为设置圆点和line位置的方法

 

 

 

 

如需要完整案例，可以到这里下载：https://github.com/slailcp/myRange/tree/master/range

效果图如下