HTML中的范圍輸入是這樣的：

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

在支持它們的瀏覽器中，它們看起來像這樣：

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

但是注意到任何怪異的東西嗎？本身，該范圍輸入不會與用戶通信，他們實際上將提交什么號碼?，F(xiàn)在，如果您的輸入類似于“您感覺如何？為悲傷留下來，為快樂。” - 那么很好，您可能不需要向用戶顯示一個數(shù)字。但是我敢打賭，更普遍的是，您需要顯示數(shù)字，而不是不顯示數(shù)字。

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

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

但是，來吧，僅僅因為我們想要一個涼爽的滑塊并不意味著我們應(yīng)該阻止用戶知道提交的值。我不一定會說瀏覽器應(yīng)更改其UI控件以顯示該數(shù)字。我是說我們應(yīng)該自己建立！

這是標簽的理想用例，該用例專門針對由表單元素計算的值。這是您如何使用它的超級簡單實現(xiàn)：

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

我們的目標是顯示一個“氣泡”，以顯示范圍輸入的當前值。

從輸入的值中設(shè)置“氣泡”的值是將范圍值提取并將其插入氣泡中：

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

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

 range.AddeventListener（“輸入”，（）=> {
  setBubble（范圍，氣泡）;
}）;

函數(shù)setBubble（范圍，氣泡）{
  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;

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

在這里，我們要確保根據(jù)該范圍內(nèi)的當前值計算范圍輸入最小范圍和最大屬性，并計算0-100的位置。并非所有范圍都是默認的0-100數(shù)字，因此說一個范圍在0到200的范圍內(nèi)為50，這是25％的方式。這說明了這一點。

但是它有一個煩人的缺陷：起始開始時，氣泡在左邊太遠，末端太遠了。在范圍輸入上，拇指不會懸掛在左邊緣，因此中心處于開始，最后相同。就像滾動條一樣，拇指的邊緣在軌道內(nèi)。

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

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

這是最后的演示：

我受到啟發(fā)去戳戳這個問題，因為讀者Maxgloba用他們的版本寫了我的文章：我將在此處發(fā)布：

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

其他版本

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

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

Simurai：

Vincent Durand：

不要忘記范圍輸入可以讓數(shù)據(jù)師在它們上幾乎沒有檔位，這有點酷。

Ana Tudor有一個大量的收藏，其中許多通過其設(shè)計表示當前價值。

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

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

讓我們來吸引我們的朋友jQuery，并繼續(xù)使用CSS。這個目標在下面。任何范圍輸入，任何時候，任何最小/最大步驟 - 我們在其上方放置一個氣泡，顯示當前值。

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

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

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

 // Dom準備就緒
$（function（）{
 var el，newpoint，newplace，偏移；
 
 //選擇所有范圍輸入，請注意更改
 $（“ input [type ='range']”）。更改（function（）{
 
   //緩存以提高效率
   el = $（this）;
   
   //測量范圍輸入的寬度
   寬度= 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; }
   
   //移動氣泡
   El
     .NEXT（“輸出”）
     .css（{
       左：新地方，
       Marginleft：偏移“％”
     }））
     .text（el.val（））;
 }））
 //偽造一個更改以在頁面負載處泡泡的位置泡沫
 .trigger（'change'）;
}）;

其中一個總零件是1.3值。我試圖將泡沫三角形的尖端與滑塊的中心對齊。這并不容易，因為滑塊的中心永遠不會左右100％。該價值不是完美的，也不是完美實現(xiàn)的，但是比沒有它要好。

作為獎勵，不支持范圍輸入的瀏覽器仍然可以獲取氣泡動作。

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

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

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

以上是范圍輸入的價值氣泡的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！