現(xiàn)代 CSS 強(qiáng)大的令人難以置信。

這次我們來(lái)用 CSS 實(shí)現(xiàn)一個(gè)全功能的滑動(dòng)輸入器，也就是各大組件庫(kù)都有的slider，效果如下：

還可以改變一下樣式，像這樣。

特別是在拖動(dòng)時(shí)，tooltip還能跟隨拖動(dòng)的方向和速度呈現(xiàn)不同的傾斜角度，這些是如何通過(guò)CSS實(shí)現(xiàn)的呢？一起來(lái)看看吧~

一、自定義input range

首先來(lái)看滑動(dòng)輸入器的最原始形態(tài)。

<input type="range">

效果如下：

要自定義樣式，一般要修改這幾個(gè)偽元素。

::-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;
}

效果如下：

相信大家很容易做到這一步，因?yàn)橹恍枰远x這幾個(gè)偽元素就行了。

這里還有一個(gè)難點(diǎn)，就是左邊滑過(guò)的區(qū)域，如何也自定義顏色呢？畢竟沒(méi)有專門(mén)的選擇器（Firefox有，這里主要討論Chrome），接下來(lái)請(qǐng)繼續(xù)看。

二、自定義滑過(guò)區(qū)域的顏色

在之前，曾經(jīng)通過(guò)border-image實(shí)現(xiàn)過(guò)類似的效果，主要原理是border-image可以在繪制元素之外，在拖拽手柄左側(cè)繪制一個(gè)足夠長(zhǎng)的條條就行了。

不過(guò)這種實(shí)現(xiàn)有一個(gè)局限，由于是通過(guò)超出隱藏的方式裁剪掉多出的部分，使得滑動(dòng)條邊緣是“一刀切”的，無(wú)法實(shí)現(xiàn)圓角

回到這里，可以想想，要實(shí)現(xiàn)自定義左邊滑過(guò)區(qū)域的樣式，本質(zhì)是需要知道當(dāng)前的滑動(dòng)進(jìn)度，假設(shè)進(jìn)度是--progress，那么軌道滑過(guò)區(qū)域的背景色可以這樣來(lái)表示。

[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;
}

那么，如何實(shí)時(shí)獲取這個(gè)進(jìn)度呢？

在以往，可以借助 JS實(shí)時(shí)更新這樣一個(gè)自定義變量，這也是目前最好的實(shí)現(xiàn)方式。

而現(xiàn)在，有了更好的方式來(lái)徹底實(shí)現(xiàn)這樣一個(gè)功能，那就是滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)。

有些同學(xué)可能無(wú)法理解，這里又沒(méi)有滾動(dòng)，怎么會(huì)和這個(gè)特性有關(guān)呢？別急，滾動(dòng)驅(qū)動(dòng)有兩種類型，一個(gè)是 scroll()、還有一個(gè)是view()，我們這里要用到的就是view()，其實(shí)也就是利用這一點(diǎn)來(lái)監(jiān)聽(tīng)元素在視區(qū)的位置。

具體怎么做呢？

首先，通過(guò)@property定義一個(gè)CSS變量，整數(shù)類型。

@property --progress {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

然后定一個(gè)動(dòng)畫(huà)，從0到100就行了，表示進(jìn)度。

@keyframes slider {
    to {
        --progress: 100;
    }
}

由于是需要監(jiān)聽(tīng)拖拽手柄，也就是::-webkit-slider-thumb 的位置，所以要給這個(gè)偽元素添加view-timeline，但是我們需要通過(guò)::-webkit-slider-thumb改變父級(jí)軌道::-webkit-slider-runnable-track的樣式，所以需要用到time-scope（可以跨層級(jí)關(guān)聯(lián)），具體實(shí)現(xiàn)如下：

[type="range"]{
    timeline-scope: --slider;
    animation: slider linear 3s reverse;
    animation-timeline: --slider;    
}
[type="range"]::-webkit-slider-thumb {
    /**/
    view-timeline: --slider inline;
}

這樣一來(lái)，拖拽手柄的位置就通過(guò)動(dòng)畫(huà)實(shí)時(shí)映射到了input 上，效果如下：

這樣就是實(shí)現(xiàn)了自定義滑動(dòng)區(qū)域的樣式，是不是非常神奇？

三、實(shí)時(shí)顯示滑動(dòng)進(jìn)度

由于前面實(shí)現(xiàn)了--progress的實(shí)時(shí)變化，現(xiàn)在展示出來(lái)就比較容易了，需要用CSS計(jì)數(shù)器。

為了方便表示，我們可以單獨(dú)用一個(gè)標(biāo)簽來(lái)展示進(jìn)度，結(jié)構(gòu)如下：

<label class="slider">
  <input type="range">
  <output class="tooltip"></output>
</label>

然后將--progress通過(guò)偽元素呈現(xiàn)出來(lái)。

.tooltip::before{
  content: counter(num);
  counter-reset: num var(--progress);
}

效果如下：

數(shù)字已經(jīng)可以正常顯示了，但是有個(gè)問(wèn)題，起始點(diǎn)不對(duì)，不是0和100，我們把拖拽手柄透明度降低，可以看到進(jìn)度其實(shí)是這樣的。

這是由于默認(rèn)的animation-range是cover，除了這種方式，還有其他幾種方式。

很明顯，我們這里應(yīng)該需要contain，因?yàn)榛瑝K是始終在軌道內(nèi)的。

.slider{
    position: relative;
    timeline-scope: --slider;
    animation: slider linear 3s reverse;
    animation-timeline: --slider;
    animation-range: contain; /*設(shè)置animation-range*/
}

效果如下：

這樣進(jìn)度就正常了。

四、tooltip自動(dòng)跟隨滑塊

首先美化一下，小三角可以用另一個(gè)偽元素實(shí)現(xiàn)。

.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;
}

效果如下：

那么，如何讓這個(gè)tooltip自動(dòng)跟隨滑塊呢？

一種方式是直接通過(guò)--progress來(lái)計(jì)算left值。

.tooltip{
  position: absolute;
  left: calc(var(--progress) * 1%);
}

不過(guò)這種計(jì)算是有偏差的，這是因?yàn)槎ㄎ皇窍鄬?duì)于軌道位置的，而不是滑塊中心。

為了修復(fù)這個(gè)問(wèn)題，我們可以給input一個(gè)負(fù)的margin。

[type="range"] {
    /*  */
    margin: 0 -10px;
}

這樣就可以了。

不過(guò)這樣還有有尺寸方面的問(wèn)題的，如下：

除了這種方式，還可以用錨點(diǎn)定位的方式實(shí)現(xiàn)。

實(shí)現(xiàn)非常簡(jiǎn)單，只需要給滑塊一個(gè)anchor-name。

[type="range"]::-webkit-slider-thumb {
    /**/
    anchor-name: --thumb;
}

然后給tooltip設(shè)置錨點(diǎn)定位。

.tooltip{
  position: absolute;
  position-anchor: --thumb;
  inset-area: top;
}

這樣就完美實(shí)現(xiàn)了，也不用擔(dān)心定位偏差的問(wèn)題。

五、自動(dòng)跟隨拖拽方向

還有最后一個(gè)效果，可以自動(dòng)跟隨拖拽方向，這是如何實(shí)現(xiàn)的呢？

重新定義一個(gè)CSS變量。

@property --progress2 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

然后給這個(gè)變量設(shè)置為--progress，但是要給一個(gè)過(guò)渡時(shí)間。

.tooltip{
  --progress2: var(--progress);
  transition: --progress2 .1s ease-out;
}

由于有過(guò)渡時(shí)間，所以這兩個(gè)變量就會(huì)有一個(gè)差值，類似于這樣。

根據(jù)這個(gè)差值，我們不就可以知道拖動(dòng)方向和速度了嗎，然后給一個(gè)旋轉(zhuǎn)角度。

.tooltip{
  transform-origin: center bottom;
  rotate: calc((var(--progress2) - var(--progress))*2deg);
}

這樣就實(shí)現(xiàn)了文章開(kāi)頭所示效果：

完整代碼可以查看以下鏈接

• 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]

六、兼容性和總結(jié)

這個(gè)實(shí)現(xiàn)主要依賴于滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)，所以兼容性要求Chrome 115+，如果需要tooltip的錨點(diǎn)定位，則需要Chrome 125+，下面總結(jié)一下。

• Chrome 沒(méi)有專門(mén)的選擇器來(lái)自定義滑過(guò)區(qū)域的樣式。
• 通過(guò)border-image可以自定義滑過(guò)區(qū)域的樣式，但是不能實(shí)現(xiàn)圓角。
• 滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)的視圖滾動(dòng)可以監(jiān)聽(tīng)滑塊的位置。
• 通過(guò)CSS變量和滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)可以將實(shí)時(shí)進(jìn)度傳遞給軌道，從而通過(guò)線性漸變繪制滑過(guò)區(qū)域顏色。
• 借助CSS計(jì)數(shù)器和偽元素可以將CSS變量顯示在頁(yè)面。

當(dāng)然，不兼容的瀏覽器也可以采用回退措施，比如不支持滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)，我們可以用JS來(lái)動(dòng)態(tài)賦值--progress變量，不支持錨定定位，我們可以用絕對(duì)定位，配合left也能實(shí)現(xiàn)，雖然復(fù)雜一點(diǎn)，但也是現(xiàn)階段比較好的處理方式了，剩下的就交給時(shí)間吧。

[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。