原生的input[type=range]元素支持的浏览器还是挺多的,使用方便简单,就是样式需要调整下。下面是Chrome和Firefox的样式效果
使用及样式
html
<div class="range-box">
<input type="range" min="0" max="100" step="10" value="10" onchange="valueChange(event)" >
</div>
js
// 拖动滑块改变之后,放下鼠标停止滑动,并且值改变才会触发
// min-设置最小值
// max-设置最大值
// step-设置间隔
function valueChange(event){
console.log('event', event.target.value);
}
css
.range-box{
width: 500px;
margin: 50px;
}
/* background 滑道样式 */
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #eee;
}
/* firefox - slider 滑块样式 */
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
background: #5237D5;
border-radius: 50%;
border: none;
}
/* chrome - slider 滑块样式 */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
background: #5237D5;
border-radius: 50%;
border: none;
}
效果-Chrome
效果-Firefox