html里range怎么改样式,input range样式更改,模拟滑块(示例代码)

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

});