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