?
This document uses PHP Chinese website manual Release
<input> 類型 "range" 的元素允許用戶指定一個必須不小于給定值的數(shù)值, 并且不超過另一個給定值。然而, 確切的價值并不被認為是重要的。通常使用滑塊或撥號控件而不是文本輸入框 (即 "數(shù)字" 輸入類型通常在屏幕上表示) 來表示。因為這種小部件不精確, 所以通常不應該使用它, 除非控件的精確值不重要。
<input type="range">
如果用戶的瀏覽器不支持類型"range"，則會回退并將其視為"text"輸入。
值 | 包含所選數(shù)值的字符串表示的DOMString; 使用valueAsNumber來獲取值作為一個數(shù)字 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 自動完成，列表，最大值，最小值和步長 |
IDL屬性 | 列表，值和值asNumber |
方法 | stepDown（）和stepUp（） |
Value
該value屬性包含一個DOMString包含選定數(shù)字的字符串表示的屬性。該值從不是空字符串（""）。默認值是最小值和最大值之間的一半，除非指定的最大值實際上小于指定的最小值，在這種情況下，默認值被設置為min屬性的值。確定默認值的算法是：
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
如果嘗試設置低于最小值的值，則將該值設置為最小值。同樣，試圖設置高于最大值的值會導致值被設置為最大值。
使用范圍輸入
雖然該"number"類型允許用戶輸入具有可選約束的數(shù)字，強制其值介于最小值和最大值之間，但確實需要輸入特定值。該"range""輸入類型允許您在用戶可能甚至不關心或知道特定數(shù)值所選的值的情況下向用戶詢問值。
常用范圍輸入情況的幾個例子：
音量控制，如音量和平衡，或過濾器控制。
顏色配置控件，如顏色通道，透明度，亮度等
游戲配置控制，如難度，可視距離，世界大小等。
密碼管理員生成的密碼的密碼長度
通常，如果用戶更可能對最小值和最大值之間的距離百分比感興趣，那么范圍輸入就是一個很好的選擇。例如，在音量控制的情況下，用戶通常認為“將音量設置為最大”而不是“將音量設置為0.5”。
指定最小值和最大值
默認情況下，最小值為0，最大值為100.如果這不是您想要的，可以通過更改min和/或max屬性的值來輕松指定不同的邊界。這些可以是任何浮點值。
例如，要詢問用戶-10到10之間的值，可以使用：
<input type="range" min="-10" max="10">
設置值的粒度
默認情況下，粒度為1，表示該值始終為整數(shù)。您可以更改step屬性來控制粒度。例如，如果您需要5到10之間的值，精確到小數(shù)點后兩位，則應將該值設置step為0.01：
<input type="range" min="5" max="10" step="0.01">
如果您希望接受任何值，而不考慮其擴展的小數(shù)位數(shù)，則可"any"以為step屬性指定一個值：
<input type="range" min="0" max="3.14" step="any">
這個例子讓用戶選擇0到π之間的任何值，對所選值的小數(shù)部分沒有任何限制。
添加散列標記和標簽
HTML規(guī)范為瀏覽器提供了一些如何呈現(xiàn)范圍控制的靈活性。這種靈活性沒有任何地方比在散列標記方面更為明顯，在較小的程度上也是標簽。該規(guī)范描述了如何使用list屬性和a 添加自定義點到范圍控件<datalist>，但沒有任何要求甚至對控件的長度上的標準散列或刻度標記的建議。
范圍控制模型
由于瀏覽器具有這種靈活性，并且迄今為止都不支持HTML為范圍控件定義的所有功能，所以下面是一些模型，用于向您展示在支持它們的瀏覽器中可能獲得的macOS。
一個樸素的范圍控制
如果你沒有指定list，或者瀏覽器不支持，就是這樣。
HTML | Screenshot |
|---|---|
<input type="range"> |
帶有散列標記的范圍控制
這個范圍控制使用一個list屬性，它指定了一個<datalist>在控件上定義了一系列散列標記的ID ：它們中的11個，這樣就有0％和10％的標記。我們希望有一個哈希標記的每個點都使用一個<option>元素來表示，該元素被value設置為應該繪制標記的范圍值。
HTML | Screenshot |
|---|---|
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100"> </datalist> |
帶有散列標記和標簽的范圍控制
您可以將標簽添加到您的范圍控制中，方法是將該label屬性添加<option>到與您希望具有標簽的刻度線相對應的元素。
HTML | Screenshot |
|---|---|
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist> |
目前，沒有瀏覽器完全支持這些功能。Firefox根本不支持散列標記和標簽，例如Chrome支持散列標記但不支持標簽。
改變方向
HTML規(guī)范建議，如果指定的寬度小于高度，瀏覽器會自動切換到繪圖范圍控件。不幸的是，目前沒有主流瀏覽器直接支持垂直范圍控件。但是，您可以通過在其一側繪制水平范圍控制來創(chuàng)建垂直范圍控制。最簡單的方法是使用CSS：通過應用transform旋轉元素，可以使其垂直。讓我們來看看。
HTML
HTML需要被更新來包裝<input>在a中<div>，讓我們在執(zhí)行轉換之后更正布局（因為轉換不會自動影響頁面的布局）：
<div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"></div>
CSS
那么我們需要CSS。首先是包裝本身的CSS; 這指定了我們想要的顯示模式和大小，以便頁面正確地布局; 本質(zhì)上，它保留了滑塊的頁面區(qū)域，以便旋轉的滑塊適合保留的空間而不會造成混亂。
.slider-wrapper {
display: inline-block;
width: 20px;
height: 150px;
padding: 0;}<input>，在保留空間內(nèi)顯示元素的樣式信息：
.slider-wrapper input {
width: 150px;
height: 20px;
margin: 0;
transform-origin: 75px 75px;
transform: rotate(-90deg);}控件的大小設置為150像素長×20像素高。頁邊距被設置為0，并且transform-origin移動到滑塊旋轉通過的空間的中間; 由于滑塊被配置為150像素寬，所以它通過每側150像素的盒子旋轉。在每個軸上將原點偏移75px意味著我們將圍繞該空間的中心旋轉。最后，我們逆時針旋轉90°。結果是：范圍輸入被旋轉，因此最大值在頂部，最小值在底部。
結果
截圖 | 現(xiàn)場采樣 |
|---|---|
驗證
沒有可用的模式驗證; 但是，執(zhí)行以下形式的自動驗證：
如果將
value值設置為無法轉換為有效浮點數(shù)字的內(nèi)容, 則驗證失敗, 因為輸入正遭受錯誤的輸入。
該值不會小于
min。默認值是0。
該值不會大于
max。默認值是100。
該值將是一個倍數(shù)
step。默認值是1。
例子
另外，上面的各種示例中，您將在這些文章中找到范圍輸入：
使用ConstantSourceNode控制多個參數(shù) SpecificationsSpecificationStatusCommentWHATWG HTML生活標準該規(guī)范中<input type =“range”>'的定義。生活標準初始定義HTML 5.1該規(guī)范中<input type =“range”>'的定義。推薦初始definitionBrowser compatibilityFeatureChromeEdgeFirefox Gecko）Internet ExplorerOperaSafariBasic support4.021223（23）11010.13.1 AndroidEndroidChrome for AndroidEdgeFirefox Mobile（Gecko）IE MobileOpera MobileSafari MobileBasic support2.13572（Yes）52.0（52）110（Yes）5.11雖然規(guī)范說明范圍輸入應該垂直繪制如果寬度大于高度，則此行為目前尚未實施。有關更多信息，請參閱這些Firefox錯誤：bug 981916.2 Chrome實現(xiàn)了
slider-vertical非標準-webkit-appearance屬性的值。您不應該使用它，因為它是專有的，除非您為其他瀏覽器的用戶包含適當?shù)幕赝?/em> .3 Android瀏覽器"range"從版本2.1開始識別類型，但直到版本4.3.4才完全實現(xiàn)它。繪制散列/刻度標記尚未實施。有關更多信息，請參閱bug 841942
HTML表單
<input>和HTMLInputElement它基于的界面
<input type="number">