前言
前段时间通过 GASP 给大家带来了几个相关特效，这次来点原生的效果，通过基本三件套给大家实现一个轻松有趣的滑块百分比效果，简单来说就是通过滑块和滑动条以及百分比来实现一个丝滑的结合应用。
效果预览
这次我们要实现的效果如下所示。
HTML部分
首先我们来看到 HTML 部分，相关代码如下。
<div>
<h2 id="rangeValue"></h2>
<div id="fillRangeValue"></div>
<input type="range" class="range" value="0" min="0" max="100"
onmousemove="rangeSlider(this.value)" onchange="rangeSlider(this.value)"
>
</div>
其实在这里也涉及到函数，后面会有所提及。这里包含一个滑动条的 HTML 元素。它的功能是显示滑动条的当前值，并在滑动条被拖动时更新值的显示。
首先，代码中的 <h2> 元素和 <div> 元素用于显示滑动条的当前值。<h2> 元素的 id 属性为 rangeValue，<div> 元素的 id 属性为 fillRangeValue。
接下来，<input> 元素是一个 range 类型的输入元素，它创建了一个滑动条。它的 class 属性为 range，value 属性为 0，min 属性为 0，max 属性为 100。onmousemove和 onchange 属性分别指定了两个函数 rangeSlider(this.value)，这两个函数在滑动条被拖动或改变值时被调用。
JS部分
上面的 HTML 部分提到了函数，因此我们接下来来看看 JS 部分代码，这里是控制整个效果实现的关键所在。
<script>
function rangeSlider(value){
document.getElementById('rangeValue').innerHTML = value
document.getElementById('fillRangeValue').style.width = `${value}%`
}
</script>
函数名为 rangeSlider，它接受一个参数 value，代表滑块的值。它可能会根据滑动条的值来更新 <h2> 元素和 <div> 元素的内容，以显示滑动条的当前值。
该函数首先码通过使用 getElementById 方法获取 id 为 rangeValue 的元素，并将其 innerHTML 属性设置为 value，即将滑块的值显示在页面上。
然后通过使用 getElementById 方法获取 id 为 fillRangeValue 的元素，并将其 style 属性的 width 属性设置为 ${value}%，即将滑块背景的宽度设置为滑块的值的百分比。
总的来说，这段 JS 代码的作用是实时更新滑块的值，并将滑块背景的宽度根据滑块的值进行调整，以便显示当前滑块的值。
CSS部分
关于 CSS 部分，这里选择比较关键的内容展示给大家，完整代码可以前往码上掘金查看。
#rangeValue{
position: relative;
display: block;
font-size: 6em;
color: rgba(0,0,0,0.8);
z-index: 2;
text-align: center;
}
#rangeValue::after{
content: '%';
}
首先是 id 名为 rangeValue 的元素。设置元素的定位方式为相对定位，相对于其正常位置进行定位。再将元素设置为块级元素，使其独占一行。在这里使用了 after 伪元素，它在 #rangeValue 元素的内容后面插入一个内容为 % 的伪元素。这个伪元素可以通过 content 属性进行设置。
.range{
position: relative;
width: 400px;
height: 15px;
/* -webkit-appearance: none; */
background: rgba(0, 0, 0, 0.8);
outline: none;
border-radius: 15px;
box-shadow: 0 0 0 2px #151515,inset 0 0 5px #000;
z-index: 2;
overflow: hidden;
}
.range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #00adff;
border: 4px solid #222;
z-index: 2;
box-shadow: -407px 0 0 400px #00adff;
}
其次是类名为 range 的元素。
这里是用来定义一个滑动条的样式。首先设置元素的定位方式为相对定位。并且设置好元素的宽度和高度还有背景颜色等。接下来则是针对滑动条的滑块样式处理。.range::-webkit-slider-thumb 是一个伪元素选择器，用来选择滑动条的滑块。同理，设置好滑块的宽度和高度为为 15px，设置好背景颜色。在这里，通过 box-shadow: -407px 0 0 400px #00adff 设置滑块的阴影效果，使其看起来像是填充了滑动条的颜色。
总体来说，这段代码定义了一个具有黑色背景和蓝色滑块的滑动条样式。
最后，其余部分未展示的 CSS 代码就是对整个效果做出优化，都是基本的字体颜色位置等样式处理。
总结
以上就是该滑块百分比效果的实现过程了，整体而言并不难，代码简洁易懂，这个效果也比较有意思，完整代码可以在码上掘金中查看，欢迎大家亲自去试一试，相信会有一定收获。
原文链接：https://juejin.cn/post/7313418590307631119 作者：一条会coding的Shark
