input range样式更改,模拟滑块

Posted 2020-08-24

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

效果图：

html 代码：

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

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);
});