项目要求在移动端实现可滑动的进度条,用纯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: ''});
});
最终实现效果如下: