手把手教你通过原生的Input实现一个Slider组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

• 本文将介绍，如何使用原生的input，实现一个Slider组件，并且优化的样式，如果感兴趣的话就继续看下去吧！

简介：

实现方法主要使用到Input Range对象，他是Html5新增的，对于Internet Explorer 9及更早IE版本不支持使用，不过好消息是今年6月之后IE就废弃了，本前端爆喜！具体其他浏览的兼容性点击这里查看哦

使用：

最简单的使用就是<input type="range">，但是这并不能满足我们的需求。 如图：

先给大家介绍下他的一些常用属性：

• min：设置滑块组件的最小值
• max：设置滑块组件的最大值
• step：设置滑块组件的颗粒度（step设置多少移动一下便是多少，默认是1）

美化：

实现了简单的滑动条，接下来我们就需要美化他的样式了。

比如我们要实现这样一个滑动条，如图：

美化滑动条的样式主要用这个input的几个伪类选择器进行实现。

首先最重要的一点是需要使用-webkit-appearance: none;将默认样式干掉。

chorme浏览器中的伪类选择器：

• input::-webkit-slider-container：可以修改容器的若干样式
• input::-webkit-slider-runnable-track：可以修改轨道的若干样式
• input::-webkit-slider-thumb：可以修改滑块的若干样式 代码如下：

input {
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    background-color: #ebecf1;
    background: -webkit-linear-gradient(#2492fc, #2492fc) no-repeat, #ebecf1;
    border: 0px;
    object-fit: contain;
    border-radius: 5px;
    /*可以修改容器的若干样式*/
    // ::-webkit-slider-container {
    // }
    /*可以修改轨道的若干样式*/
    &::-webkit-slider-runnable-track {
        height: 10px;
        border-radius: 5px;
        &:hover {
            cursor: pointer;
        }
    }
    &:focus {
        outline: none;
    }
    /*可以修改滑块的若干样式*/
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 100px;
        box-shadow: 0 4px 8px 0 rgba(36, 146, 252, 0.2);
        border: solid 3px #fff;
        background-color: #2492fc;
        margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
        position: relative;
        &:hover {
            cursor: grab;
        }
    }
}

FireFox浏览器中的选择器：

• input::-moz-range-progress：已填充部分

IE浏览器中的选择器：

• input::-ms-fill-upper：滑道未填充的部分
• input::-ms-fill-lower：滑道已填充的部分

如何控制图中蓝色圆圈阴影以及上面提示气泡的显影和位置？

显隐：通过事件，如果获取到input的焦点就显示，否则则隐藏。

• mousedown和mouseup事件
• 注意：如果需要兼容移动端，还需要绑定touchstart和touchend事件 位置：动态绑定style，将他们设置position: absolute，动态计算他们的left值。