提供Verge3D教程和Web3D开发技术服务

修改HTML5滑块组件

HTML5有默认的滑块组件,很多前端CSS组件库都是使用DIV自定义实现的,跟这些组件库的效果比起来,默认的效果就有点守旧了。

HTML代码:

<input type="range" name="points" min="1" max="10">

默认滑块效果:

elementUI滑块效果:

在样式上面通常我们的需求是多样化的,那么,如何修改默认的滑块样式呢?

通过直接修改滑块组件的样式可以改善效果,该组件由两部分组成:轨道(track)和滑块(thumb),它们都是伪元素。另外,还要注意浏览器的兼容性。

// 轨道的伪元素,分别对应chrome,firefox,IE浏览器。
// ::-webkit-slider-runnable-track
// ::-moz-range-track
// ::-ms-track

// 滑块的伪元素,分别对应chrome,firefox,IE浏览器。
// ::-webkit-slider-thumb
// ::-moz-range-thumb
// ::-ms-thumb

以下以chrome浏览器为例:

input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            outline: none;
        }
input[type=range]::-webkit-slider-runnable-track {
            height: 6px;
            border-radius: 6px;
            background: #059CFA;
        }
input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 100%;
            background-color: #fff;
            border: 2px solid #409eff;
            margin-top: -3px;
            cursor: pointer;
        }

效果:

完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .slider-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;

        }
        /* chrome 浏览器兼容*/
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            outline: none;
            border-radius: 6px;
            background: linear-gradient(to right, #409eff 50%, #cecdcd 50%);
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background-color: #fff;
            border: 2px solid #409eff;
            cursor: pointer;
        }
        /* firefox 浏览器兼容*/
        input[type=range] {
            -moz-appearance: none;
            width: 100%;
            height: 6px;
            outline: none;
            border-radius: 6px;
            background: linear-gradient(to right, #409eff 50%, #cecdcd 50%);
        }
        input[type=range]::-moz-range-thumb {
            -moz-appearance: none;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background-color: #fff;
            border: 2px solid #409eff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="slider-div">
        <input type="range" name="slider" id="slider1" min="0" max="100" step="1" value="50">
    </div>
    <script>
        window.onload = function () {
                const slider = document.querySelector('#slider1');
                slider.addEventListener('input', function () {
                            this.style.background =
                                `linear-gradient(to right, #409eff ${this.value}%, #cecdcd ${this.value}%)`
                        })
        }
    </script>
</body>

</html>

zjbcool

zjbcool
关闭菜单