<input type="range">

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

由於這種小部件不精確，只有在控制的精確值不重要的情況下才應使用它。

試試看

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

驗證

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

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

值

value屬性包含一個字串，該字串包含所選數字的字串表示形式。該值永遠不會是空字串 ("")。預設值為指定最小值和最大值之間的一半 - 除非最大值實際上小於最小值，在這種情況下，預設值將設定為min屬性的值。確定預設值的演算法為

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

如果嘗試將值設定為低於最小值，則將其設定為最小值。類似地，嘗試將值設定為高於最大值會導致將其設定為最大值。

注意：以下輸入屬性不適用於範圍輸入：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屬性是一個數字，指定值必須遵循的粒度。只有與指定的步長間隔匹配的值（如果指定了min，則使用value，或者如果兩者都沒有提供，則使用適當的預設值）才是有效的。

step屬性還可以設定為any字串值。此step值表示沒有隱含的步長間隔，指定範圍內的任何值都是允許的（排除其他約束，例如min和max）。有關此在支援的瀏覽器中的工作方式，請參閱將 step 設定為 any 值示例。

注意： 當用戶輸入的值不符合步長配置時，使用者代理可能會將該值舍入到最接近的有效值，在有兩個等距選項時，傾向於將數字向上舍入。

range 輸入的預設步長值為 1，僅允許輸入整數，除非步長基數不是整數；例如，如果您將 min 設定為 -10 並將 value 設定為 1.5，則 step 為 1 僅允許正方向上的 1.5、2.5、3.5 等值，以及負方向上的 -0.5、-1.5、-2.5 等值。請參見 HTML step 屬性。

非標準屬性

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 屬性，並將其設定為 <datalist> 元素的 id，該元素定義了一系列控制元件上的刻度線。每個點都使用一個 <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

為了幫助您避免重複程式碼，您可以對多個 <input type="range"> 元素和其他 <input> 型別重複使用相同的 <datalist>。

注意： 如果您還想顯示標籤（如下面的示例所示），則每個範圍輸入都需要一個 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;
}

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

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

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

技術摘要

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