原生slider组件input[type=range]使用记录

原生的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