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: ''});    });
最终实现效果如下：