input range 样式更改,js模拟滑块实时更新数据。
效果图:
html 代码:
0.0-5.0
css 代码:
div{
position: relative;
}
input[type=range] {
-webkit-appearance: none; /* 隐藏滑块,以便自定义滑块样式 */
width: 120px;
border: none;
position: absolute;
top: 20px;
}
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]: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: #ef6683;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ef6683;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #ef6683;
}
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: 27px;
left: 14px;
height: 6px;
display: inline-block;
background-color: lightgray;
}
.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.next();
var width = 85 / $this.attr(‘max‘) * value;
$lightgray.css(‘width‘, width);
});