我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月22日星期四

🌌上期文章：16个实用的CSS样式之导航栏

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是滑动选择器

来看一下最终效果吧！！！

css_09_01

2.布局设计

在进行布局设计之前，我们先来学习一个类型：

<input type="range">

range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 number输入类型这样的文本输入框来表示。由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

通过它我们可以定义一个滑块。

  <div class="slider">
      <!-- 显示选择的数值容器 -->
      <span class="selected">
          50
      </span>
      <!-- 滑动选择器 -->
      <input type="range" id="slider-input" min="0" max="100" value="50" />
 </div>

打开网页我们可以预览到效果如下图：

可发现其实基础样式已经就实现了，不过细心的用户可能已经发现了，移动滑块左边的数字不会变化，那么接下来我们尝试着写几行js代码。

3.事件响应

这是我们第一次写js代码，不用怕，逻辑很简单。我们需要将滑块的位置变化反馈给左边的数据容器中。因此我们首要做的就是获取到这两个选择器。

我们有一个特定的方法document.querySelector()：

文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

这里说明一下：如果传参是id的话前面要加#，是类选择器的话需要加.

 // 获取滑动选择器实例
 const sliderEl = document.querySelector("#slider-input");
 // 获取数值显示容器实例
 const selectedEl = document.querySelector(".selected");

接下来我们再学习一个方法和一个属性：

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。

element.innerHTML 替换元素的内容，设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。

通过这一个方法和一个属性，我们就可以一行代码实现想要的功能了，通过sliderEl去调用addEventListener()执行，然后将sliderEl的属性值作为元素内容替换给selectedEl。

 // 监听滑动事件
 sliderEl.addEventListener("input", () => {
   selectedEl.innerHTML = sliderEl.value;
 });

此时再去滑动数值已会变化。

3.样式美化

但是我们在一个网页中用这么丑的滑块肯定影响用户的体验，所以我们接下来进行样式美化。

3.1滑动条美化

灰色太难看，简单的给滑块设置一个蓝色渐变

 input[type="range"] {
   /* 禁用浏览器默认外观 */
   -webkit-appearance: none;
   background: linear-gradient(75deg, #3c40c6 0%, #575fcf 100%);
   border-radius: 4px;
   width: 100%;
   height: 12px;
   outline: none;
   box-shadow: 0 0 6px rgb(28, 32, 148);
 }

3.2滑块美化

::-webkit-slider-thumb

type 为 range 的 input 标签内的一种伪类样式，用于设置 range 的滑块的具体样式，该伪类只在内核为 webkit/blink 的浏览器中有效

除此之外还可以在用户滑动时给滑块加一个阴影。

 /* 滑动选择器上的滑动按钮 */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #f53b57;
   transition: 0.3s;
 }
 /* 当滑动选择器上的滑动按钮滑动时 */
 input[type="range"]:active::-webkit-slider-thumb {
   background-color: #ef5777;
   box-shadow: 0 0 0 6px rgba(155, 73, 146, 0.4);
 }

3.3数值容器美化

最后我们为数值容器加一个背景色，以及箭头指示。

 /* 显示数值的容器 */
 .selected {
   margin-right: 16px;
   background-color: #f53b57;
   width: 80px;
   line-height: 40px;
   text-align: center;
   color: white;
   border-radius: 4px;
   position: relative;
 }
 
 /* 三角 */
 .selected::after {
   content: "";
   display: block;
   border-top: 8px solid transparent;
   border-left: 8px solid #f53b57;
   border-bottom: 8px solid transparent;
   position: absolute;
   top: calc(50% - 8px);
   right: -6px;
 }

4.结语

到此为止一个简单的滑动选择器就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

16个实用的CSS样式之滑动选择器