拉霸、滑杆样式 ( slider )
当 HTML 的 input 设定为 range 类型时会呈现滑杆 ( 拉霸、range slider ) 的样貌，而浏览器会替滑杆添加默认样式，这篇教学会利用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 这两个具有厂商字首的特殊元素，调整滑杆的样式，最后还会搭配 JavaScript 和多重阴影，设计出有趣又漂亮的滑杆。
注意，本篇教学仅适用于支援 -webkit- 的浏览器。
快速导览：
产生滑杆 ( range slider )
如果将 input 元素的 type 属性改为 range 类型，就会产生一个“数值滑杆”，用户可以使用拖拉的方式，调整滑杆数值，额外支援的属性如下 ( 其余属性参考“input 通用属性” )：
| 属性 | 说明 |
|---|---|
| min | 最小值。 |
| max | 最大值。 |
| step | 调整的区间。 |
| value | 默认值。 |
下方的 HTML 会在网页中里会放入一个 0～100 数值滑杆，滑杆默认值 50，拖拉间隔为 10，这个滑杆会套用浏览器默认样式。
<input type="range" min="0" max="100" value="50" step="10">
::-webkit-slider-runnable-track 滑杆拖拉范围样式
::-webkit-slider-runnable-track 样式属性可以设定“滑杆拖拉范围的样式”，由于滑杆的宽度由元素本身样式定义，因此这个样式属性无法设定宽度，且建议搭配 appearance: none 关闭浏览器默认样式，下方范例会呈现三种不同的滑杆拖拉范围样式。
这个样式并不实用，因为直接修改
input的background也会产生相同的效果。
<!-- HTML 程式碼 -->
<input class="a" type="range" min="0" max="100" value="50">
<br>
<input class="b" type="range" min="0" max="100" value="50">
<br>
<input class="c" type="range" min="0" max="100" value="50">
<!-- CSS 程式碼 -->
<style>
input {appearance: none;}
.a::-webkit-slider-runnable-track {
appearance: none; /* 無法使用 input *，需獨立撰寫 */
background: red;
border: 1px solid #000;
}
.b::-webkit-slider-runnable-track {
appearance: none; /* 無法使用 input *，需獨立撰寫 */
background: #0c0;
border: 10px solid #000;
height: 100px;
}
.c {width: 200px;}
.c::-webkit-slider-runnable-track {
appearance: none; /* 無法使用 input *，需獨立撰寫 */
background: pink;
border: 3px dashed #000;
height: 100px;
}
</style>
::-webkit-slider-thumb 滑杆调整钮样式
::-webkit-slider-thumb 样式属性可以设定“滑杆调整钮的样式”，需要搭配 appearance: none 关闭浏览器默认样式，下方范例会呈现三种不同的滑杆调整钮样式。
<!-- HTML 程式碼 -->
<input class="a" type="range" min="0" max="100" value="50">
<br>
<input class="b" type="range" min="0" max="100" value="50">
<br>
<input class="c" type="range" min="0" max="100" value="50">
<!-- CSS 程式碼 -->
<style>
input {
appearance: none;
margin: 50px 10px;
width: 200px;
border-radius: 10px;
background: #ccc;
}
.a {
height: 2px; /* 滑桿拖拉範圍高度 */
background: #000; /* 滑桿拖拉範圍底色 */
}
.a::-webkit-slider-thumb {
appearance: none; /* 關閉瀏覽器預設樣式 */
background: red; /* 滑桿調整鈕底色 */
border: 1px solid #000; /* 滑桿調整鈕邊框 */
width: 15px; /* 滑桿調整鈕長寬 */
height: 15px;
}
.b {
height:5px; /* 滑桿拖拉範圍高度 */
background: #000; /* 滑桿拖拉範圍底色 */
}
.b::-webkit-slider-thumb {
appearance: none; /* 關閉瀏覽器預設樣式 */
background: red; /* 滑桿調整鈕底色 */
border: 1px solid #000; /* 滑桿調整鈕邊框 */
width: 40px; /* 滑桿調整鈕長寬 */
height: 40px;
}
.c {
height: 5px; /* 滑桿拖拉範圍高度 */
border-top: 5px dotted #000; /* 使用邊框樣式製造不同效果 */
background: none; /* 拖拉範圍移除底色 */
}
.c::-webkit-slider-thumb {
appearance: none; /* 關閉瀏覽器預設樣式 */
margin-top: -10px; /* 往上移動，對齊滑桿底色 */
background: #0a0; /* 滑桿調整鈕底色 */
border: 1px solid #000; /* 滑桿調整鈕邊框 */
width: 20px; /* 滑桿調整鈕長寬 */
height: 80px;
border-radius: 40% / 10%; /* 滑桿調整鈕圓角 */
}
</style>
搭配 JavaScript 设计漂亮的滑杆
原本 ::-webkit-slider-thumb 可以搭配虚拟元素 ::before 和 ::after 实作调整时数值进度的颜色 ( 调整的数字区域和底色不同 )，但后来 CSS 修改了规范，也就无法单纯使用 CSS 实现数值颜色，但透过 JavaScript 取得即时的数值后，搭配 CSS 渐层色，就能即时动态改变底色，实现漂亮的滑杆效果，下方范例会呈现搭配 JavaScript 的效果。
<!-- HTML 程式碼 -->
<input id="slider" type="range" min="0" max="100" value="50">
<!-- CSS 程式碼 -->
<style>
input {
margin: 30px;
appearance: none;
/* 使用漸層色，根據滑桿預設值，設定從 50% 位置分成左右兩種顏色 */
background: linear-gradient(to right ,#f22 0%,#f22 50%,#fdd 50%, #fdd 100%);
width: 200px;
height: 15px;
border-radius: 10px;
}
input::-webkit-slider-thumb {
appearance: none;
background: #f55;
width: 25px;
height: 50px;
border: 5px solid #d00;
border-radius: 10px;
transition: .3s; /* 使用轉場，讓 hover 時有動態效果 */
}
input::-webkit-slider-thumb:hover {
width: 30px;
height: 45px;
}
</style>
<!-- JavaScript 程式碼 -->
<script>
const slider = document.getElementById('slider'); // 取的 id 為 slider 的元素
// 當 slider 發生數值改變時
slider.addEventListener('input', ()=>{
let val; // 建立 val 變數
val = slider.value; // val 等於目前的數值
p = val/(slider.max-slider.min) * 100; // 根據最大值最小值計算目前比例
// 改變漸層色
slider.style.background = `linear-gradient(to right ,#f22 0%,#f22 ${p}%,#fdd ${p}%, #fdd 100%)`
});
</script>
使用多重阴影，做出特色滑杆
如果滑杆钮的高度和 input 高度相同，则可以将 ::-webkit-slider-thumb 搭配 box-shadow 的“多重阴影”技巧，纯粹使用 CSS 就能做出具有特色的滑杆效果，实作技巧熟下：
- 详细参考：容器阴影 box-shadow、CSS 渐层色
- 这个方法的滑杆钮的高度和
input高度必须相同。input需要设定overflow:hidden，可以遮住过大的阴影。- 多重阴影可使用
em单位，根据元素本身的字号改变位置，会比设定绝对尺寸来得方便。- 搭配
range的step属性，可让多重阴影一格一格的出现。
下方范例会使用三组搭配阴影效果的滑杆，第一组使用“大型阴影”，让阴影尺寸与 input 同宽，位置调整成 input 的一半，就能实现调整时的背景色，第二组使用“多重阴影”呈现有趣的效果，第三组会搭配 step 属性和 input 的渐层背景色，实作一格一格移动的效果。
<!-- HTML 程式碼 -->
<input class="a" type="range" min="0" max="100" value="50">
<input class="b" type="range" min="0" max="100" value="50">
<input class="c" type="range" min="0" max="100" value="50" step="10">
<!-- CSS 程式碼 -->
<style>
input {
margin: 20px;
appearance: none;
width: 200px;
height: 50px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #000;
}
/* 滑桿調整鈕樣式 */
input::-webkit-slider-thumb{
appearance: none;
width: 20px;
height: 50px;
background: #f55;
border: 5px solid #d00;
border-radius: 10px;
}
/* 陰影從中心的縮放半徑為 100px ( input 寬度的一半 )，往右位移多 10px ( 調整鈕寬度 ) */
.a::-webkit-slider-thumb {
box-shadow: #f99 -110px 0 0 100px;
}
/* 多重陰影，字體大小為「寬度 - 20」的一半 ( 因為第一格不需要 )，就能用倍數的單位 em 增加 */
.b::-webkit-slider-thumb {
font-size: 9px;
box-shadow: #a00 -2em 0 0,
#c50 -4em 0 0,
#cc0 -6em 0 0,
#090 -8em 0 0,
#09c -10em 0 0,
#369 -12em 0 0,
#639 -14em 0 0,
#666 -16em 0 0,
#999 -18em 0 0,
#ccc -20em 0 0;
}
/* 多重陰影，使用漸層色產生一條一條線，尺寸為 200/11=18.2，往前移動 1px 作為線條寬度 */
.c {
background: repeating-linear-gradient(to right,
#fff 0px, #fff 17.2px,
#aaa 17.2px, #aaa 18.2px);
}
/* 多重陰影，字體大小為「寬度 - 20」的一半 ( 因為第一格不需要 )，就能用倍數的單位 em 增加 */
.c::-webkit-slider-thumb {
font-size: 9px;
box-shadow: #a00 -2em 0 0,
#c50 -4em 0 0,
#cc0 -6em 0 0,
#090 -8em 0 0,
#09c -10em 0 0,
#369 -12em 0 0,
#639 -14em 0 0,
#666 -16em 0 0,
#999 -18em 0 0,
#ccc -20em 0 0;
}
</style>
小结
CSS 负责控制打印跨页的 break-before、break-after 和 break-inside 的使用频率很低，因打印网页不单纯只有跨页，还有许多眉眉角角的问题需要处理，但如果有打印网页需求，加入这几个样式就让网页排版更佳美观。
微信扫码关注
抖音扫码关注