html range样式修改,改变input[type=range]的样式 动态滑动，

改变input[type=range]的样式 动态滑动，html>

修改range

.slider-1 {

width: 600px;

margin: 200px auto;

}

.slider-1 input[type=range] {

-webkit-appearance: none;

width: 600px;

border-radius: 5px;

background: -webkit-linear-gradient(#F5C057, #F5C057) no-repeat #E6E6E5;

background-size: 50% 100%;

}

.slider-1 input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none;

}

.slider-1 input[type=range]::-webkit-slider-runnable-track {

height: 10px;

border-radius: 5px;

}

.slider-1 input[type=range]:focus {

outline: none;

}

.slider-1 input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none;

height: 20px;

width: 2px;

margin-top: 0px;

background: #F7931E;

cursor: pointer;

}

.slider-1 .s-mark {

margin-top: 17px;

}

.slider-1 .s-mark span {

font-size: 12px;

color: #3E3A39;

display: block;

text-align: center;

}

.slider-1 .s-mark span:first-child {

float: left;

}

.slider-1 .s-mark span:nth-child(2) {

float: right;

}

0

2000

1000

function mark() {

event || (event = window.event);

$('.slider-1 input[type=range]').val(event.target.value);

var info = event.target.value / 2000 * 100;

$('.slider-1 input[type=range]').css('background-size', info + '% 100%');

}

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。

相关内容

暂无相关文章