範圍輸入的價值氣泡

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

 <intup type="“" range name="“數量”" min="“" max="“"></intup>

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

現在太好了。您可以將其用於任何想要從具有強制性最小值和最大值的用戶收集數字的任何東西。

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

公平地說，規格說：

輸入元素代表將元素值設置為代表數字的字符串的控件，但是請注意確切值並不重要，讓UAS提供的接口比對於數字狀態更簡單。

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

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

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

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

從輸入的值中設置“氣泡”的值是將範圍值提取並將其插入氣泡中：

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

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

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

函數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拇指的大小的魔術數字
  bubble.Style.Left = NewVal =“％”;
}

在這裡，我們要確保根據該範圍內的當前值計算範圍輸入最小範圍和最大屬性，併計算0-100的位置。並非所有範圍都是默認的0-100數字，因此說一個範圍在0到200的範圍內為50，這是25％的方式。這說明了這一點。

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

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

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

這是最後的演示：

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

Max版本的一個很酷的方面是范圍輸入是CSS風格的，因此已知拇指的確切大小。在JavaScript數學中，有些數字感覺相當神奇，但至少它們基於CSS中關於拇指大小的實數。

其他版本

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

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

Simurai：

Vincent Durand：

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

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

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

只是出於歷史原因將其留在這裡。

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

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

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

現在，我們需要做的是觀察所有範圍輸入以改變其價值。我們的目標是將泡沫的左側位置與滑塊一起移動。這不是世界上最簡單的事情，因為滑塊可以具有任何寬度，最小值或最大值。我們將不得不做一點數學。這是所有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％。該價值不是完美的，也不是完美實現的，但是比沒有它要好。

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

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

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

…然後在數學中使用MinValue變量。並以最大的方式執行類似的操作。無論如何，這是現場演示：

以上是範圍輸入的價值氣泡的詳細內容。更多資訊請關注PHP中文網其他相關文章！