HTML中的範(fàn)圍輸入是這樣的：

 <intup type="“" range name="“數(shù)量”" min="“" max="“"></intup>

在支持它們的瀏覽器中，它們看起來(lái)像這樣：

現(xiàn)在太好了。您可以將其用於任何想要從具有強(qiáng)制性最小值和最大值的用戶收集數(shù)字的任何東西。

但是注意到任何怪異的東西嗎？本身，該範(fàn)圍輸入不會(huì)與用戶通信，他們實(shí)際上將提交什麼號(hào)碼。現(xiàn)在，如果您的輸入類似於“您感覺(jué)如何？為悲傷留下來(lái)，為快樂(lè)?！?- 那麼很好，您可能不需要向用戶顯示一個(gè)數(shù)字。但是我敢打賭，更普遍的是，您需要顯示數(shù)字，而不是不顯示數(shù)字。

公平地說(shuō)，規(guī)格說(shuō)：

輸入元素代表將元素值設(shè)置為代表數(shù)字的字符串的控件，但是請(qǐng)注意確切值並不重要，讓UAS提供的接口比對(duì)於數(shù)字狀態(tài)更簡(jiǎn)單。

但是，來(lái)吧，僅僅因?yàn)槲覀兿胍粋€(gè)涼爽的滑塊並不意味著我們應(yīng)該阻止用戶知道提交的值。我不一定會(huì)說(shuō)瀏覽器應(yīng)更改其UI控件以顯示該數(shù)字。我是說(shuō)我們應(yīng)該自己建立！

這是標(biāo)籤的理想用例，該用例專門針對(duì)由表單元素計(jì)算的值。這是您如何使用它的超級(jí)簡(jiǎn)單實(shí)現(xiàn)：

更新！帶有香草JavaScript的新版本也可以更好。

我們的目標(biāo)是顯示一個(gè)“氣泡”，以顯示範(fàn)圍輸入的當(dāng)前值。

從輸入的值中設(shè)置“氣泡”的值是將範(fàn)圍值提取並將其插入氣泡中：

 range.AddeventListener（“輸入”，（）=> {
  bubble.innerhtml = rangel.value;
}）;

訣竅是將氣泡沿範(fàn)圍輸入放置，以便它在“拇指”旁邊滑動(dòng)。為此，我們需要計(jì)算需要將氣泡在左側(cè)掃描的百分比。因此，讓我們發(fā)揮作用來(lái)使事情保持清潔劑：

 range.AddeventListener（“輸入”，（）=> {
  setBubble（範(fàn)圍，氣泡）;
}）;

函數(shù)setBubble（範(fàn)圍，氣泡）{
  const val = range.value;
  const min = range.min？ range.min：0;
  const max = range.max？ range.max：100;
  const newVal = number（（（（val -min） * 100） /（max -min））;
  bubble.innerhtml = val;

  //基於本機(jī)UI拇指的大小的魔術(shù)數(shù)字
  bubble.Style.Left = NewVal =“％”;
}

在這裡，我們要確保根據(jù)該範(fàn)圍內(nèi)的當(dāng)前值計(jì)算範(fàn)圍輸入最小範(fàn)圍和最大屬性，併計(jì)算0-100的位置。並非所有範(fàn)圍都是默認(rèn)的0-100數(shù)字，因此說(shuō)一個(gè)範(fàn)圍在0到200的範(fàn)圍內(nèi)為50，這是25％的方式。這說(shuō)明了這一點(diǎn)。

但是它有一個(gè)煩人的缺陷：起始開(kāi)始時(shí)，氣泡在左邊太遠(yuǎn)，末端太遠(yuǎn)了。在範(fàn)圍輸入上，拇指不會(huì)懸掛在左邊緣，因此中心處?kù)堕_(kāi)始，最後相同。就像滾動(dòng)條一樣，拇指的邊緣在軌道內(nèi)。

我們可以在那裡使用一些神奇的數(shù)字，這些數(shù)字似乎在瀏覽器中正常工作：

 //基於本機(jī)UI拇指的大小的魔術(shù)數(shù)字
  bubble.style.left =`calc（$ {newVal}％（$ {8 -newval * 0.15} px））`;

這是最後的演示：

我受到啟發(fā)去戳戳這個(gè)問(wèn)題，因?yàn)樽x者M(jìn)axgloba用他們的版本寫了我的文章：我將在此處發(fā)布：

Max版本的一個(gè)很酷的方面是范圍輸入是CSS風(fēng)格的，因此已知拇指的確切大小。在JavaScript數(shù)學(xué)中，有些數(shù)字感覺(jué)相當(dāng)神奇，但至少它們基於CSS中關(guān)於拇指大小的實(shí)數(shù)。

其他版本

戴夫·奧爾森（Dave Olsen）將（原始）的想法放置在對(duì)jQuery的依賴。這是那個(gè)版本：

肖恩·斯托里克（Sean Stopnik）：

Simurai：

Vincent Durand：

不要忘記範(fàn)圍輸入可以讓數(shù)據(jù)師在它們上幾乎沒(méi)有檔位，這有點(diǎn)酷。

Ana Tudor有一個(gè)大量的收藏，其中許多通過(guò)其設(shè)計(jì)表示當(dāng)前價(jià)值。

？此帖子的原始版本的舊版本（jQuery，Plus也不起作用）

只是出於歷史原因?qū)⑵淞粼谶@裡。

讓我們來(lái)吸引我們的朋友jQuery，並繼續(xù)使用CSS。這個(gè)目標(biāo)在下面。任何範(fàn)圍輸入，任何時(shí)候，任何最小/最大步驟 - 我們?cè)谄渖戏椒胖靡粋€(gè)氣泡，顯示當(dāng)前值。

讓我們首先樣式的輸出元素。我們將絕對(duì)將其定位在輸入之上。一旦我們用JavaScript弄清楚應(yīng)該是什麼，這也使我們能夠調(diào)整左值。我們將使用漸變和邊界拉迪烏斯（Border-radius）進(jìn)行構(gòu)想，甚至還添加一個(gè)帶有偽元素的小指針三角形。

輸出 { 
  位置：絕對(duì)；
  背景圖像：線性級(jí)別（頂部，＃444444，＃999999）;
  寬度：40px; 
  身高：30px; 
  文字平衡：中心； 
  顏色：白色； 
  邊界拉迪烏斯：10px; 
  顯示：內(nèi)聯(lián)塊； 
  字體：粗體15px/30px佐治亞州；
  底部：175％；
  左：0;
  邊緣左：-1％；
}
輸出：{之後{ 
  內(nèi)容： ””;
  位置：絕對(duì)；
  寬度：0;
  身高：0;
  邊界頂：10px實(shí)心＃999999;
  邊界左：5PX實(shí)心透明；
  邊界權(quán)利：5px實(shí)心透明；
  頂部：100％；
  左：50％；
  左鍵：-5px;
  保證金頂：-1px;
}

現(xiàn)在，我們需要做的是觀察所有範(fàn)圍輸入以改變其價(jià)值。我們的目標(biāo)是將泡沫的左側(cè)位置與滑塊一起移動(dòng)。這不是世界上最簡(jiǎn)單的事情，因?yàn)榛瑝K可以具有任何寬度，最小值或最大值。我們將不得不做一點(diǎn)數(shù)學(xué)。這是所有jQuery JavaScript，評(píng)論了：

 // Dom準(zhǔn)備就緒
$（function（）{
 var el，newpoint，newplace，偏移；
 
 //選擇所有範(fàn)圍輸入，請(qǐng)注意更改
 $（“ input [type ='range']”）。更改（function（）{
 
   //緩存以提高效率
   el = $（this）;
   
   //測(cè)量範(fàn)圍輸入的寬度
   寬度= el.Width（）;
   
   //找出左和右輸入之間的放置百分比
   newPoint =（el.val（）-El.attr（“ min”）） /（el.attr（“ max”）-El.Attr（“ min”））;
   
   // Janky值以使指針更好地排列
   偏移= -1.3;
   
   //防止氣泡超越左或右（不支持的瀏覽器）
   if（newpoint  1）{newPlace = width; }
   else {newplace = width * newPoint Offset;偏移 -  = newpoint; }
   
   //移動(dòng)氣泡
   El
     .NEXT（“輸出”）
     .css（{
       左：新地方，
       Marginleft：偏移“％”
     }））
     .text（el.val（））;
 }））
 //偽造一個(gè)更改以在頁(yè)面負(fù)載處泡泡的位置泡沫
 .trigger（'change'）;
}）;

其中一個(gè)總零件是1.3值。我試圖將泡沫三角形的尖端與滑塊的中心對(duì)齊。這並不容易，因?yàn)榛瑝K的中心永遠(yuǎn)不會(huì)左右100％。該價(jià)值不是完美的，也不是完美實(shí)現(xiàn)的，但是比沒(méi)有它要好。

作為獎(jiǎng)勵(lì)，不支持範(fàn)圍輸入的瀏覽器仍然可以獲取氣泡動(dòng)作。

以上代碼取決於指定最小值和最大值的範(fàn)圍輸入。如果他們不這樣做，那就有點(diǎn)突破。我認(rèn)為在不指定這些內(nèi)容的情況下使用範(fàn)圍輸入會(huì)很奇怪，儘管如果您不這樣做，它們似乎默認(rèn)為0和100。要進(jìn)行防彈，您會(huì)抓住每個(gè)屬性，對(duì)其進(jìn)行測(cè)試，如果看起來(lái)不正確，請(qǐng)修復(fù)它。像：

 var minvalue，maxvalue;
if（！el.attr（“ min”））{minvalue = 0; } else {minvalue = el.attr（“ min”）; }

…然後在數(shù)學(xué)中使用MinValue變量。並以最大的方式執(zhí)行類似的操作。無(wú)論如何，這是現(xiàn)場(chǎng)演示：

以上是範(fàn)圍輸入的價(jià)值氣泡的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！