<input type="range">

Baseline 廣泛可用 *

此特性已得到良好確立，可跨多種裝置和瀏覽器版本使用。自 2017 年 3 月起，所有瀏覽器均支援此特性。

* 此特性的某些部分可能存在不同級別的支援。

型別為 range 的 <input> 元素允許使用者指定一個數值，該數值必須不小於給定值且不大於另一個給定值。然而，精確值並不被認為是重要的。這通常透過滑塊或刻度盤控制元件而不是像 number 輸入型別那樣的文字輸入框來表示。

由於這種小部件不精確，因此只有當控制元件的精確值不重要時才應使用它。

試一試

<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

如果使用者的瀏覽器不支援 range 型別，它將回退並將其視為 text 輸入。

值

<input type="range"> 元素的值透過 value 屬性設定，該屬性接受一個表示所選數字的字串。值永遠不是空字串 ("")。預設值是指定最小值和最大值之間的一半——除非最大值實際上小於最小值，在這種情況下，預設值設定為 min 屬性的值。確定預設值的演算法是

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

如果嘗試將值設定為低於最小值，則將其設定為最小值。同樣，嘗試將值設定為高於最大值將導致其設定為最大值。

驗證

沒有可用的模式驗證；但是，執行以下形式的自動驗證

如果 value 設定為無法轉換為有效浮點數的值，則驗證失敗，因為輸入存在錯誤輸入。
值不會小於 min。預設值為 0。
值不會大於 max。預設值為 100。
值將是 step 的倍數。預設值為 1。

注意： 以下輸入屬性不適用於輸入範圍：accept、alt、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、maxlength、minlength、multiple、pattern、placeholder、readonly、required、size 和 src。如果包含這些屬性中的任何一個，它們將被忽略。

list

list 屬性的值是位於同一文件中的 <datalist> 元素的 id。 <datalist> 為此輸入提供了一個預定義值列表，以供使用者建議。列表中與 type 不相容的任何值都不包含在建議選項中。提供的值是建議，而不是要求：使用者可以從這個預定義列表中選擇，或者提供一個不同的值。

請參閱下面的新增刻度線，瞭解在支援的瀏覽器中如何表示範圍選項的示例。

max

允許值範圍中的最大值。如果輸入到元素中的 value 超過此值，則元素將失敗約束驗證。如果 max 屬性的值不是數字，則元素沒有最大值。

此值必須大於或等於 min 屬性的值。請參閱 HTML max 屬性。

min

允許值範圍中的最小值。如果元素的 value 小於此值，則元素將失敗約束驗證。如果為 min 指定的值不是有效的數字，則輸入沒有最小值。

此值必須小於或等於 max 屬性的值。請參閱 HTML min 屬性。

注意： 如果 min 和 max 值相等，或者 max 值低於 min 值，則使用者將無法與範圍進行互動。

step

step 屬性是一個數字，指定值必須遵循的粒度，或者特殊值 any（如下所述）。只有從步長基數計算的整數步長值才有效。如果指定了 min，則步長基數是 min，否則是 value，如果兩者都未提供，則為 0。

step 輸入的預設步長值為 1，只允許輸入整數——_除非_步長基數不是整數。

字串值 any 意味著不暗示任何步長，並且允許任何值（除了其他約束，例如 min 和 max）。請參閱將步長設定為 any 值示例，瞭解這在支援的瀏覽器中是如何工作的。

注意： 當用戶輸入的值不符合步長配置時，使用者代理可能會將值四捨五入到最近的有效值，當有兩個同樣接近的選項時，優先向上取整。

非標準屬性

orient

類似於影響 <progress> 和 <meter> 元素的非標準 CSS 屬性 -moz-orient，orient 屬性定義了範圍滑塊的方向。值包括 horizontal，表示範圍水平呈現，以及 vertical，表示範圍垂直呈現。

示例

雖然 number 型別允許使用者輸入一個數字，並透過可選約束強制其值介於最小值和最大值之間，但它確實要求使用者輸入一個特定值。在使用者可能甚至不關心或不知道所選特定數值的情況下，range 輸入型別允許你向用戶請求一個值。

範圍輸入常用的一些示例情況

音訊控制，如音量和平衡，或濾鏡控制。
顏色配置控制，如顏色通道、透明度、亮度等。
遊戲配置控制，如難度、可見距離、世界大小等。
密碼管理器生成的密碼的密碼長度。

通常，如果使用者更關心最小值和最大值之間的百分比距離，而不是實際數字本身，那麼範圍輸入是一個很好的選擇。例如，在家庭立體聲音量控制的情況下，使用者通常會認為“將音量設定為最大值的一半”，而不是“將音量設定為 0.5”。

指定最小值和最大值

預設情況下，最小值為 0，最大值為 100。如果這不是你想要的，你可以透過更改 min 和/或 max 屬性的值來輕鬆指定不同的界限。這些可以是任何浮點值。

例如，要向用戶請求一個介於 -10 和 10 之間的值，你可以使用

html

<input type="range" min="-10" max="10" />

設定值的粒度

預設情況下，粒度為 1，這意味著值始終為整數。要控制粒度，你可以更改 step 屬性。例如，如果你需要一個介於 5 和 10 之間的值，則應將 step 的值設定為 0.5

設定 step 屬性

html

<input type="range" min="5" max="10" step="0.5" />

將 step 設定為 `any`

如果你想接受任何值，無論它有多少小數位，你都可以為 step 屬性指定 any 值

HTML

html

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

此示例允許使用者選擇 0 到 π 之間的任何值，而對所選值的小數部分沒有任何限制。JavaScript 用於顯示使用者與範圍互動時值的變化。

新增刻度線

要向範圍控制元件新增刻度線，請包含 list 屬性，並將其 id 指定為 <datalist> 元素，該元素定義了控制元件上的一系列刻度線。每個點都使用一個 <option> 元素表示，其 value 設定為應繪製標記的範圍值。

HTML

html

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

結果

將相同的 datalist 用於多個範圍控制元件

為了避免程式碼重複，你可以將相同的 <datalist> 重用於多個 <input type="range"> 元素以及其他 <input> 型別。

注意： 如果你還想顯示標籤，如下例所示，那麼你需要為每個範圍輸入一個 datalist。

HTML

html

<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

結果

新增標籤

你可以透過為 <option> 元素提供 label 屬性來標記刻度線。但是，標籤內容預設不會顯示。你可以使用 CSS 來顯示標籤並正確定位它們。這裡有一種方法可以做到這一點。

HTML

html

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

CSS

css

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

結果

建立垂直範圍控制元件

預設情況下，瀏覽器將範圍輸入呈現為滑塊，旋鈕左右滑動。

要建立拇指上下滑動的垂直範圍，請將 writing-mode 屬性設定為 vertical-rl 或 vertical-lr 值

<input type="range" min="0" max="10" value="8" />

css

input[type="range"] {
  writing-mode: vertical-lr;
}

這將導致範圍滑塊垂直呈現

如果你想支援舊版本的 Chrome 和 Safari，還可以將 CSS appearance 屬性設定為非標準的 slider-vertical 值，幷包含非標準的 orient="vertical" 屬性以支援舊版本的 Firefox。

請參閱建立垂直表單控制元件以獲取示例。

技術摘要

值	一個包含所選數值的字串表示的字串；使用 `valueAsNumber` 將值作為數字獲取。
事件	`change` 和 `input`
支援的常見屬性	`autocomplete`、`list`、`max`、`min`、`step`
IDL 屬性	`list`、`value`、`valueAsNumber`
DOM 介面	`HTMLInputElement`
方法	`stepDown()` 和 `stepUp()`
隱式 ARIA 角色	`slider`