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

最新推荐文章于 2022-12-19 01:02:17 发布

桐溪漂流

最新推荐文章于 2022-12-19 01:02:17 发布

阅读量783

点赞数

分类专栏：小知识点 css 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq564280420/article/details/123800120

版权

小知识点同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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