input range实现可滑动的滚动条

项目要求在移动端实现可滑动的进度条，用纯div+css实现，感觉流畅性不够好，最后决定用type=range进行改造

1、页面布局

    

<p class="progress">
    <input type="range" id="accidentRange" min="0" max="200" step="5" value="0">
    <span class="fill"></span>
    <label class="current">0</label>
</p>

  css代码如下：

 .progress{position: relative;}

input[type=range] {
  -webkit-appearance: none;
  width: 311px;
  height:8px;
  border-radius: 100px; /*将轨道设为圆角的*/
  background: #E3E6EB;
  border-radius: 100px; /*这个属性设置使填充进度条时的图形为圆角*/
  z-index: 5;
}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 40px;
  background-image: url("../img/recommend/slider.svg");
  background-size: cover;
  box-shadow: 0 6px 6px rgba(255,137,129,0.35);
  border-radius: 24px;
  border:none;
}

.fill{
  position: absolute;
  left:0;
  top:3px;
  width: 0;
  height: 8px;
  background: #FFA099;
  border-radius: 100px 0 0 100px;
}

.current{
  color: #F97D75;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  left:10px;
  top:-30px;
}

其中type=range是基本的滑动条样式，在此重写了滚动条和滑块thumb的样式，

fill是滑块拉动后左侧的颜色填充区域，current是在滑块上方显示当前拉动的值。

2、js实现

新建一个rangeSlider.js，代码如下：

 

$.fn.RangeSlider = function(cfg){
    this.sliderCfg = {
        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
        max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
        step: cfg && Number(cfg.step) ? cfg.step : 1,
        callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
      .attr('max', max)
      .attr('step', step);

    $input.bind("input", function(e){
        $input.attr('value', this.value);
        var width = ((311-40)/40)*(this.value/5);  //(拿滑动条的总宽 - 滑块的宽度/总共要移动的步数（总共200，每步是5，所以要移动40步）)* 当前是第几步 算出移动的距离
        if(this.value == 0){
            width = 0;
        }
        $input.next().css({'width':width'}); //将fill的宽度置为上面计算好的值
        $input.siblings('.current').css({'left':width+'rem'});  //同上
        $input.siblings('.current').html(this.value);


        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};

  页面js调用如下

   $(function(){

    $('#accidentRange').RangeSlider({min: 0, max: 200, step: 5, callback: ''});

    });

最终实现效果如下：