CSS 實現帶tooltip的slider
現代 CSS 強大的令人難以置信。
這次我們來用 CSS 實現一個全功能的滑動輸入器，也就是各大組件庫都有的slider，效果如下：
還可以改變一下樣式，像這樣。
特別是在拖動時，tooltip還能跟隨拖動的方向和速度呈現不同的傾斜角度，這些是如何通過CSS實現的呢？一起來看看吧~
一、自定義input range
首先來看滑動輸入器的最原始形態。
<input type="range">效果如下：
要自定義樣式，一般要修改這幾個偽元素。
::-webkit-slider-container{
/*容器*/
}
::-webkit-slider-runnable-track{
/*軌道*/
}
::-webkit-slider-thumb{
/*手柄*/
}這里可以很輕松的改變軌道的寬高，拖拽手柄的大小等等。
[type="range"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 400px;
overflow: hidden;
height: 20px;
}
[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: #eee;
border-radius: 4px;
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #9747FF;
transform: translateY(-50%);
margin-top: 2px;
}效果如下：
相信大家很容易做到這一步，因為只需要自定義這幾個偽元素就行了。
這里還有一個難點，就是左邊滑過的區域，如何也自定義顏色呢？畢竟沒有專門的選擇器（Firefox有，這里主要討論Chrome），接下來請繼續看。
二、自定義滑過區域的顏色
在之前，曾經通過border-image實現過類似的效果，主要原理是border-image可以在繪制元素之外，在拖拽手柄左側繪制一個足夠長的條條就行了。
不過這種實現有一個局限，由于是通過超出隱藏的方式裁剪掉多出的部分，使得滑動條邊緣是“一刀切”的，無法實現圓角
回到這里，可以想想，要實現自定義左邊滑過區域的樣式，本質是需要知道當前的滑動進度，假設進度是--progress，那么軌道滑過區域的背景色可以這樣來表示。
[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: linear-gradient(#9747FF 0 0) 0 0/calc(var(--progress) * 1%) 100% no-repeat #eee;
border-radius: 4px;
}那么，如何實時獲取這個進度呢？
在以往，可以借助 JS實時更新這樣一個自定義變量，這也是目前最好的實現方式。
而現在，有了更好的方式來徹底實現這樣一個功能，那就是滾動驅動動畫。
有些同學可能無法理解，這里又沒有滾動，怎么會和這個特性有關呢？別急，滾動驅動有兩種類型，一個是 scroll()、還有一個是view()，我們這里要用到的就是view()，其實也就是利用這一點來監聽元素在視區的位置。
具體怎么做呢？
首先，通過@property定義一個CSS變量，整數類型。
@property --progress {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}然后定一個動畫，從0到100就行了，表示進度。
@keyframes slider {
to {
--progress: 100;
}
}由于是需要監聽拖拽手柄，也就是::-webkit-slider-thumb 的位置，所以要給這個偽元素添加view-timeline，但是我們需要通過::-webkit-slider-thumb改變父級軌道::-webkit-slider-runnable-track的樣式，所以需要用到time-scope（可以跨層級關聯），具體實現如下：
[type="range"]{
timeline-scope: --slider;
animation: slider linear 3s reverse;
animation-timeline: --slider;
}
[type="range"]::-webkit-slider-thumb {
/**/
view-timeline: --slider inline;
}這樣一來，拖拽手柄的位置就通過動畫實時映射到了input 上，效果如下：
這樣就是實現了自定義滑動區域的樣式，是不是非常神奇？
三、實時顯示滑動進度
由于前面實現了--progress的實時變化，現在展示出來就比較容易了，需要用CSS計數器。
為了方便表示，我們可以單獨用一個標簽來展示進度，結構如下：
<label class="slider">
<input type="range">
<output class="tooltip"></output>
</label>然后將--progress通過偽元素呈現出來。
.tooltip::before{
content: counter(num);
counter-reset: num var(--progress);
}效果如下：
數字已經可以正常顯示了，但是有個問題，起始點不對，不是0和100，我們把拖拽手柄透明度降低，可以看到進度其實是這樣的。
這是由于默認的animation-range是cover，除了這種方式，還有其他幾種方式。
很明顯，我們這里應該需要contain，因為滑塊是始終在軌道內的。
.slider{
position: relative;
timeline-scope: --slider;
animation: slider linear 3s reverse;
animation-timeline: --slider;
animation-range: contain; /*設置animation-range*/
}效果如下：
這樣進度就正常了。
四、tooltip自動跟隨滑塊
首先美化一下，小三角可以用另一個偽元素實現。
.tooltip{
position: absolute;
margin: 0 0 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-size: 14px;
border-radius: 4px;
padding: 10px;
color: #f0f0f0;
background-color: #333;
transform-origin: center bottom;
filter: drop-shadow(4px 4px 4px rgba(50, 50, 50, 0.3));
}
.tooltip::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}效果如下：
那么，如何讓這個tooltip自動跟隨滑塊呢？
一種方式是直接通過--progress來計算left值。
.tooltip{
position: absolute;
left: calc(var(--progress) * 1%);
}不過這種計算是有偏差的，這是因為定位是相對于軌道位置的，而不是滑塊中心。
為了修復這個問題，我們可以給input一個負的margin。
[type="range"] {
/* */
margin: 0 -10px;
}這樣就可以了。
不過這樣還有有尺寸方面的問題的，如下：
實現非常簡單，只需要給滑塊一個anchor-name。
[type="range"]::-webkit-slider-thumb {
/**/
anchor-name: --thumb;
}然后給tooltip設置錨點定位。
.tooltip{
position: absolute;
position-anchor: --thumb;
inset-area: top;
}這樣就完美實現了，也不用擔心定位偏差的問題。
五、自動跟隨拖拽方向
還有最后一個效果，可以自動跟隨拖拽方向，這是如何實現的呢？
重新定義一個CSS變量。
@property --progress2 {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}然后給這個變量設置為--progress，但是要給一個過渡時間。
.tooltip{
--progress2: var(--progress);
transition: --progress2 .1s ease-out;
}由于有過渡時間，所以這兩個變量就會有一個差值，類似于這樣。
根據這個差值，我們不就可以知道拖動方向和速度了嗎，然后給一個旋轉角度。
.tooltip{
transform-origin: center bottom;
rotate: calc((var(--progress2) - var(--progress))*2deg);
}這樣就實現了文章開頭所示效果：
完整代碼可以查看以下鏈接
- CSS slider (juejin.cn)[1]
- CSS slider (codepen.io)[2]
還可以改變一下樣式。
[type="range"]::-webkit-slider-runnable-track {
height: 20px;
background: linear-gradient(#9747FF 0 0) 0 0/calc(var(--progress) * 1% + 20px * (50 - var(--progress))/100) 100% no-repeat #eee;
border-radius: 24px;
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
border: 3px solid #9747FF;
view-timeline: --slider inline;
anchor-name: --thumb;
}這樣可以得到下面的效果：
完整代碼可以查看以下鏈接
- CSS custom slider (juejin.cn)[3]
- CSS custom slider (codepen.io)[4]
六、兼容性和總結
這個實現主要依賴于滾動驅動動畫，所以兼容性要求Chrome 115+，如果需要tooltip的錨點定位，則需要Chrome 125+，下面總結一下。
- Chrome 沒有專門的選擇器來自定義滑過區域的樣式。
- 通過border-image可以自定義滑過區域的樣式，但是不能實現圓角。
- 滾動驅動動畫的視圖滾動可以監聽滑塊的位置。
- 通過CSS變量和滾動驅動動畫可以將實時進度傳遞給軌道，從而通過線性漸變繪制滑過區域顏色。
- 借助CSS計數器和偽元素可以將CSS變量顯示在頁面。
當然，不兼容的瀏覽器也可以采用回退措施，比如不支持滾動驅動動畫，我們可以用JS來動態賦值--progress變量，不支持錨定定位，我們可以用絕對定位，配合left也能實現，雖然復雜一點，但也是現階段比較好的處理方式了，剩下的就交給時間吧。
[1]CSS slider (juejin.cn)： https://code.juejin.cn/pen/7409224431194603574。
[2]CSS slider (codepen.io)： https://codepen.io/xboxyan/pen/eYwxxdQ。
[3]CSS custom slider (juejin.cn)： https://code.juejin.cn/pen/7415566353493000219。
[4]CSS custom slider (codepen.io)： https://codepen.io/xboxyan/pen/OJeddWm。
