HTML5 – range

HTML5提供了range控件，可以用于滑塊和可調整范圍的輸入字段。愛掏網 - it200.com有了range, 我們可以輕松為用戶提供一種滑動或調整值的方式，它為Web開發提供了更多的靈活性和交互性。愛掏網 - it200.com

HTML代碼

<label for="volume">音量：</label>
<input type="range" id="volume" value="50" min="0" max="100">

在這個例子中，我們使用
“`“`來創建一個range控件，并設置了它的id, 值(value)的初始值為50，最小值(min)為0，最大值(max)為100。愛掏網 - it200.com

屬性

下面我們詳細介紹這些屬性：

• value

  這個屬性定義了range控件的值。愛掏網 - it200.com它可以是一個整數，也可以是小數或浮點數。愛掏網 - it200.com

  <label for="temperature">溫度：</label>
  <input type="range" id="temperature" value="26.5" min="10" max="35">
  

  在這個例子中，range控件的值是26.5，最小值為10，最大值為35。愛掏網 - it200.com

• min

  這個屬性定義了range控件的最小值。愛掏網 - it200.com

  <label for="age">年齡：</label>
  <input type="range" id="age" value="18" min="0" max="100">
  

  在這個例子中，range控件的最小值為0，最大值為100。愛掏網 - it200.com

• max

  這個屬性定義了range控件的最大值。愛掏網 - it200.com

  <label for="speed">速度：</label>
  <input type="range" id="speed" value="5" min="0" max="10">
  

  在這個例子中，range控件的最小值為0，最大值為10。愛掏網 - it200.com

• step

  這個屬性定義了range控件的步長。愛掏網 - it200.com步長決定了range控件的滑塊滑動的距離和值的變化程度。愛掏網 - it200.com

  <label for="price">價格：</label>
  <input type="range" id="price" value="100" min="0" max="1000" step="100">
  

  在這個例子中，range控件的步長為100，最小值為0，最大值為1000。愛掏網 - it200.com

• list

  這個屬性關聯一個datalist元素，可以提供一個選擇列表給用戶。愛掏網 - it200.com

  <label for="rating">評分：</label>
  <input type="range" id="rating" value="3.5" min="0" max="5" step="0.1" list="ratingList">
  
  <datalist id="ratingList">
  <option value="0">不及格</option>
  <option value="1">及格</option>
  <option value="2">中等</option>
  <option value="3">良好</option>
  <option value="4">優秀</option>
  <option value="5">卓越</option>
  </datalist>
  

其他屬性

• autocomplete
• autofocus
• disabled
• form
• name
• readonly
• required
• tabindex

事件

oninput事件

當用戶拖動滑塊或者使用鍵盤調整值時，oninput事件就會觸發。愛掏網 - it200.com我們可以使用oninput事件來實時更新一個顯示元素（如一個計數器或一個進度條）。愛掏網 - it200.com

<label for="quantity">數量：</label>
<input type="range" id="quantity" value="1" min="1" max="10">

<p>已選擇的數量： <span id="quantitySelected"></span></p>

<script>
  const quantity = document.getElementById('quantity')
  const quantitySelected = document.getElementById('quantitySelected')

 quantity.oninput = function() {
    quantitySelected.textContent = this.value;
  }
</script>

在這個例子中，我們創建了一個range控件和一個元素來顯示已選擇的數量。愛掏網 - it200.com在JavaScript代碼中，我們定義了一個事件處理程序來監聽range控件的oninput事件，當用戶拖動滑塊或者使用鍵盤調整值時，事件處理程序更新顯示元素的值。愛掏網 - it200.com

CSS樣式

range控件的外觀可以通過CSS進行自定義。愛掏網 - it200.com如果我們想要修改range控件的外觀，我們可以使用::-webkit-slider-thumb偽元素。愛掏網 - it200.com

CSS樣式代碼

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background-color: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 5px #4CAF50;
}

input[type="range"]:hover {
  opacity: 1;
}

input[type="range"]:active {
  opacity: 1;
}

在這個例子中，我們定義了一個CSS樣式，自定義了range控件的外觀。愛掏網 - it200.com我們將默認的滑塊樣式去掉，使用自定義的滑塊樣式代替，并添加了一些效果，使得range控件更加美觀、易用。愛掏網 - it200.com

瀏覽器兼容性

Range控件是HTML5新增的，在不同的瀏覽器上可能會有一些差異。愛掏網 - it200.com目前主流瀏覽器（chrome, firefox, safari, opera, edge, ie11+）均已支持range控件。愛掏網 - it200.com

結論

HTML5的range控件提供了一種更加直觀和交互的方式來調整范圍和值。愛掏網 - it200.com通過設置屬性和事件處理程序，我們可以輕松地實現range控件的自定義和功能擴展。愛掏網 - it200.com同時，我們還可以通過CSS樣式來修改range控件的外觀，增強用戶體驗。愛掏網 - it200.com