HTML5新特性——自定義滑動條（input[type="range"]）

HTML 4.01 與 HTML5之間的差別

如下 input 的 type屬性值是 HTML5 中新增的：

color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

input的type屬性

設置input的type="range"便可獲得滑動條控件，以下：

<input id="range" type="range" value="5" onchange="changeV()">

const range = document.getElementById('range');

function changeV() {
  console.log(range.value);
}

滑動條對應屬性

• max - 規定容許的最大值。
• min - 規定容許的最小值。
• step - 規定合法數字間隔。
• value - 規定默認值。

下面咱們來使用一下上面的各個屬性（示例：經過滑動條控制元素大小）：

<input type="range" id="range" value="20" min="0" max="200" step="1" onchange="changeV()">
  <div class="box"></div>
  <script>
    const range = document.getElementById('range');
    function changeV() {
      const boxL = parseInt(range.value);
      console.log(boxL);
      const box = document.getElementsByClassName('box')[0];
      box.style.width = boxL + 'px';
      box.style.height = boxL + 'px';
  }
</script>

示例中：

• min - 0
• max - 200
• step - 1
• value - 20

對應初始樣式以下：

滑動滑動條後的gif圖以下：

如何讓滑動條控件更加好看

先看兩個不一樣效果示例圖：

上面兩個紅色框中的滑動條明顯比默認樣式好看不少，那麼它們是如何實現的呢，接下來咱們講實現過程：

兩個不一樣樣式滑動條的實現過程

這裏把對應滑動條的相關代碼貼出來：

<p>週期</p>
<input type="range" id="dur" value="0.50" min="0" max="1.00" step="0.01" onchange="changeV()">
<p>速度</p>
<input type="range" id="speed" value="0" min="0" max="5" step="0.01" onchange="changeV()">

/* 這裏不考慮瀏覽器的兼容性 */
#control input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white;
    background-size: 50% 100%; /* 由於週期默認value=0.50正好佔50% */
}
/* -webkit-slider-thumb僅對谷歌瀏覽器有效 */
#control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #aaa;
    width: 8px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
}

#control input[type="range"]::-webkit-slider-thumb:hover {
    background: #666;
}

/* 左側漸變色的寫法,默認滑塊在最左側因此下面white爲0% */
#control #speed {
    background: linear-gradient(to right, #ffa200, white 0%, white);
    background-size: 100% 100%;
}

const duration = document.getElementById('dur');
const speed = document.getElementById('speed');
function changeV() {
    durVal = parseFloat(duration.value);
    spdVal = parseFloat(speed.value);
    const durationPercent = parseFloat(durVal, 2) * 100
    const speedPercent = parseFloat((spdVal / 5), 2) * 100
    duration.style.backgroundSize = `${durationPercent}%, 100%`
    speed.style.background = `linear-gradient(to right, #ffa200, white ${speedPercent}%, white`
};

相信你們結合代碼能夠清晰的掌握兩種滑動條的實現方法，這裏就不過多解釋了
gif效果局部展現：

文章中用到的示例演示地址

演示地址

寫在最後

前端是一個龐大的體系，不少知識在沒用到的時候也許咱們根本不知道它多有用。就好比文中的滑動條，工做中很難碰到，一旦要用的時候咱們還得去琢磨一番，這裏經過本身的講解相信可讓須要的人更好的使用滑動條功能，若是以爲本文對你有所幫助不妨點個贊再走吧，謝謝啦！