input range样式更改,模拟滑块

input range 样式更改，js模拟滑块实时更新数据。

效果图：

 

html 代码：

<div>

　　<span class="slider"></span>
　　<span class="lightgray"></span>
　　<input type="range" min="0" max="5" step="0.1" value="0">
　　<span class="value"><span class="min">0</span>-5</span>

</div>

 

css 代码：

div{
position: relative;
}
input[type=range] {
-webkit-appearance: none; /* 隐藏滑块，以便自定义滑块样式 */
width: 120px;
border: none;
position: absolute;
background: transparent;
z-index: 3;
top: 20px;
&:before {
content: attr(min);
padding-right: 5px;
}
&:after {
content: attr(max);
padding-left: 5px;
}
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none; /* 去掉默认蓝色边框 */
}

input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* 隐藏滑块，以便自定义滑块样式 */
border-color: transparent;
color: transparent;
}

/* 设定WebKit浏览器下range */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-top: -2px;
margin-left: -1px;
}

/* Firefox下 */
input[type=range]::-moz-range-thumb {
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-left: -1px;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
}

input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.lightgray {
position: absolute;
top: 22px;
left: 2px;
height: 6px;
display: inline-block;
background-color: lightgray;
z-index: 2;
}
.slider{
position: absolute;
top: 22px;
left: 2px;
height: 6px;
display: inline-block;
background-color: #ef6683;
width: 118px;
}

.value{
margin-left: 30px;
}

 

js代码：

$("input").on("mousemove",function(){
var $this = $(this);
var $min = $this.closest('div').find('.value .min');
var value = parseFloat($this.val());
$min.text(value.toFixed(1));
var $lightgray = $this.closest('div').find('.lightgray');
var $slider = $this.closest('div').find('.slider');
var width = $slider.width() / $this.attr('max') * value;
$lightgray.css('width', width);
});