16 种实用的滑动选择器 CSS 样式
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
作者简介：一个喜欢写作的大三菜鸟，主修会计
个人主页： 陆莉主演
首发日期：2022 年 9 月 22 日星期四
上一篇： 16 个实用的 CSS 样式导航栏
订阅专栏：《16 种实用的 CSS 样式》
1 简介
对于前端的初学者来说，CSS样式的设计是对基本功和创意的考验。在项目开发中，我们不可能把大部分时间都花在写 CSS 代码上，把能重用的都重用。所以特地总结了项目开发中常用的16种CSS样式。因为我也是初学者，所以会从小白的角度记录学习这16种风格的设计和写法。今天给大家带来的是 幻灯片选择器
看看最终结果！ ！ ！
2. 版面设计
在进行布局设计之前，让我们学习一种类型：
<input type="range">
**范围** 类型元素允许用户指定一个数字，该数字必须不小于给定值且不大于另一个给定值。但是，确切的值并不重要。通常使用滑块或拨号控件来表示，而不是像数字输入类型那样的文本输入框。因为这个小部件不精确，所以一般不应该使用它，除非控件的确切值不重要。
有了它，我们可以定义一个滑块。
< div 类 = “滑块” >
<!-- 显示选择的数值容器 -->
<跨度类=“选择”>
50
</ span >
<!-- 滑动选择器 -->
<输入类型=“范围”ID=“滑块输入”最小=“0”最大=“100”值=“50”/>
</ div >
复制代码
打开网页，我们可以预览效果如下图：
可以发现基本的样式已经实现了，但是细心的用户可能已经发现滑块左边的数字是不会变的，那我们就试着写几行js代码。
3. 事件响应
这是我们第一次写js代码，别怕，逻辑很简单。我们需要将滑块的位置变化反馈给左侧的数据容器。所以我们要做的第一件事就是得到这两个选择器。
我们有一个具体的方法 document.querySelector() ：
文档对象模型 文档 引 **查询选择器（）** 方法返回文档中与指定选择器或选择器组匹配的第一个文档 元素 目的。如果没有找到匹配项，则返回 无效的 .
这里注意一下：如果参数是id，在前面加上 # ，如果是类选择器，则需要添加 .
// 获取滑动选择器实例
常量 sliderEl = 文档。 querySelector("#slider-input");
// 获取值展示容器实例
const selectedEl = 文档。 querySelector(".selected");
复制代码
接下来我们学习另一种方法和一种属性：
EventTarget.addEventListener() 方法将指定的侦听器注册到 事件目标 on，当对象触发指定事件时，会执行指定的回调函数。
element.innerHTML 替换元素的内容，设置 内部HTML 的值允许您轻松地将当前元素的内容替换为新内容。
通过这个方法和一个属性，我们可以用一行代码实现想要的功能。 滑块El 打电话 添加事件监听器（） 执行，然后将sliderEl的属性值作为元素内容替换为selectedEl。
// 监听滑动事件
sliderEl.addEventListener("输入", () => {
selectedEl.innerHTML = 滑块El.value ;
}) ;
复制代码
此时，滑动值会发生变化。
3.风格美化
但是我们在网页中使用这么丑陋的滑块肯定会影响用户的体验，所以接下来我们会美化一下样式。
3.1 滑条美化
灰色太难看，只需将滑块设置为蓝色渐变
输入[类型=“范围”] {
/* 禁用浏览器默认外观 */
-webkit 外观：无；
背景：线性渐变（75度，#3c40c6 0%，#575fcf 100%）；
边框半径：4px；
宽度：100%；
高度：12px；
大纲：无；
盒子阴影：0 0 6px rgb(28,32,148);
}
复制代码
3.2 滑块美化
**::-webkit-slider-thumb**
输入标签中的伪类样式，其类型为范围。用于设置范围滑块的具体样式。这个伪类只在带有 webkit/blink 内核的浏览器中有效。
此外，您可以在用户滑动时为滑块添加阴影。
/* 滑动选择器上的滑动按钮 */
输入 [type="range" ]::-webkit-slider-thumb {
-webkit 外观：无；
宽度：20px；
高度：20px；
边界半径：50%；
背景颜色：#f53b57；
过渡：0.3s；
}
/* 当滑动选择器上的滑动按钮滑动时 */
输入 [type="range" ] :active::-webkit-slider-thumb {
背景颜色：#ef5777；
盒子阴影：0 0 0 6px rgba（155、73、146、0.4）；
}
复制代码
3.3 数值容器美化
最后，我们为值容器添加背景颜色，以及箭头指示器。
/* 显示值的容器*/
.选定{
右边距：16px；
背景颜色：#f53b57；
宽度：80px；
行高：40px；
文本对齐：居中；
白颜色;
边框半径：4px；
位置：相对；
}
/* 三角形 */
.selected ::之后{
内容： ””;
显示：块；
边框顶部：8px 纯透明；
左边框：8px 实心#f53b57；
边框底部：8px 实心透明；
位置：绝对；
顶部：计算（50% - 8px）；
右：- 6px；
}
复制代码
4。结论
到目前为止一个简单的 幻灯片选择器 完成。当然，在普通网站中不使用配色。它应该是简单和大气的。但是学习阶段已经足够好了。如果你感觉很好，请记住 喜欢支持 什么。
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/5523/10413/1835
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
