原生实现滑动条效果

不念不忘少年蓝@ 2023-07-19 10:32 49阅读 0赞

![20200330131824288.png][]

![20200330131846391.png][]

实现效果类似如上：

html:

css:

input[type='range'] {
        -webkit-appearance: none;
        width: 300px;
        border-radius: 10px;
        margin: 20px;
    }
    input[type='range']:focus {
        outline: none;
    }
    
    /* chrome */
    input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        border-radius: 10px;
        box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
    }
    input[type='range']::-webkit-slider-thumb{
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        margin-top: -5px;
        background: #ffffff;
        border-radius: 50%;
        border: solid 0.125em rgba(205, 224, 230, 0.5);
        box-shadow: 0 0.125em 0.125em #3b4547;
    }
    
    /* ----firefox---- */
    input[type='range']::-moz-range-track {
        height: 10px;
        border-radius: 10px;
        box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
    }
    input[type='range']::-moz-range-thumb {
        height: 20px;
        width: 20px;
        margin-top: -5px;
        background: #ffffff;
        border-radius: 50%;
        border: solid 0.125em rgba(205, 224, 230, 0.5);
        box-shadow: 0 0.125em 0.125em #3b4547;
    }
    input[type='range']::-moz-range-progress {
        background: #aeaeae;
        height: 10px;
        border-radius: 10px 0 0 10px / 10px 0 0 10px;
    }
    /* 当然IE的自定义样式伪类也有，但是我不需要用IE就不写了：-ms-track,-ms-thumb,-ms-fill-lower,-ms-fill-upper */

moz比webkit多一个progress的样式，所以Firefox的样式就可以变成下面的样子：

![20200331092256581.png][]

js用于监听range值的改变，可以有两种方法:

[20200330131824288.png]: /images/20230528/773799c4433242e9abe36a8ed2ce66e2.png
[20200330131846391.png]: /images/20230528/be10c6ab6439480c97b824fca722ccfe.png
[20200331092256581.png]: /images/20230528/47a5bccf22e64afb87b9903e7d26b652.png