拉霸、滑桿樣式 range slider

當 HTML 的 input 設定為 range 類型時會呈現滑桿 ( 拉霸、range slider ) 的樣貌，而瀏覽器會替滑桿添加預設樣式，這篇教學會利用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 這兩個具有廠商字首的特殊元素，調整滑桿的樣式，最後還會搭配 JavaScript 和多重陰影，設計出有趣又漂亮的滑桿。

注意，本篇教學僅適用於支援 -webkit- 的瀏覽器。

快速導覽：

產生滑桿 ( range slider )

::-webkit-slider-runnable-track 滑桿拖拉範圍樣式

::-webkit-slider-thumb 滑桿調整鈕樣式

搭配 JavaScript 設計漂亮的滑桿

使用多重陰影，做出特色滑桿

CSS 教學 - 拉霸、滑桿樣式 range slider

產生滑桿 ( 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">

CSS 教學 - 拉霸、滑桿樣式 range slider - 產生滑桿 ( range slider )

::-webkit-slider-runnable-track 滑桿拖拉範圍樣式

::-webkit-slider-runnable-track 樣式屬性可以設定「滑桿拖拉範圍的樣式」，由於滑桿的寬度由元素本身樣式定義，因此這個樣式屬性無法設定寬度，且建議搭配 appearance: none 關閉瀏覽器預設樣式，下方範例會呈現三種不同的滑桿拖拉範圍樣式。

這個樣式並不實用，因為直接修改 input 的 background 也會產生相同的效果。

線上展示：https://codepen.io/oxxo/pen/ZYEEQxr

<!-- 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>

CSS 教學 - 拉霸、滑桿樣式 range slider - ::-webkit-slider-runnable-track 滑桿拖拉範圍樣式

::-webkit-slider-thumb 滑桿調整鈕樣式

::-webkit-slider-thumb 樣式屬性可以設定「滑桿調整鈕的樣式」，需要搭配 appearance: none 關閉瀏覽器預設樣式，下方範例會呈現三種不同的滑桿調整鈕樣式。

線上展示：https://codepen.io/oxxo/pen/xbxxZNe

<!-- 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>

CSS 教學 - 拉霸、滑桿樣式 range slider - ::-webkit-slider-thumb 滑桿調整鈕樣式

搭配 JavaScript 設計漂亮的滑桿

原本 ::-webkit-slider-thumb 可以搭配虛擬元素 ::before 和 ::after 實作調整時數值進度的顏色 ( 調整的數字區域和底色不同 )，但後來 CSS 修改了規範，也就無法單純使用 CSS 實現數值顏色，但透過 JavaScript 取得即時的數值後，搭配 CSS 漸層色，就能即時動態改變底色，實現漂亮的滑桿效果，下方範例會呈現搭配 JavaScript 的效果。

線上展示：https://codepen.io/oxxo/pen/JojjmgX

<!-- 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>

CSS 教學 - 拉霸、滑桿樣式 range slider - ::-webkit-slider-thumb 搭配 JavaScript 設計漂亮的滑桿

使用多重陰影，做出特色滑桿

如果滑桿鈕的高度和 input 高度相同，則可以將 ::-webkit-slider-thumb 搭配 box-shadow 的「多重陰影」技巧，純粹使用 CSS 就能做出具有特色的滑桿效果，實作技巧熟下：

詳細參考：容器陰影 box-shadow、CSS 漸層色

這個方法的滑桿鈕的高度和 input 高度必須相同。

input 需要設定 overflow:hidden，可以遮住過大的陰影。

多重陰影可使用 em 單位，根據元素本身的字型大小改變位置，會比設定絕對尺寸來得方便。

搭配 range 的 step 屬性，可讓多重陰影一格一格的出現。

下方範例會使用三組搭配陰影效果的滑桿，第一組使用「大型陰影」，讓陰影尺寸與 input 同寬，位置調整成 input 的一半，就能實現調整時的背景色，第二組使用「多重陰影」呈現有趣的效果，第三組會搭配 step 屬性和 input 的漸層背景色，實作一格一格移動的效果。

線上展示：https://codepen.io/oxxo/pen/LEYYXKd

<!-- 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 教學 - 拉霸、滑桿樣式 range slider - 使用多重陰影，做出特色滑桿

小結

CSS 負責控制列印跨頁的 break-before、break-after 和 break-inside 的使用頻率很低，因列印網頁不單純只有跨頁，還有許多眉眉角角的問題需要處理，但如果有列印網頁需求，加入這幾個樣式就讓網頁排版更佳美觀。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

拉霸、滑桿樣式 range slider

產生滑桿 ( range slider )

::-webkit-slider-runnable-track 滑桿拖拉範圍樣式

::-webkit-slider-thumb 滑桿調整鈕樣式

搭配 JavaScript 設計漂亮的滑桿

使用多重陰影，做出特色滑桿

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flex 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果