范围输入的值气泡

HTML中的范围输入如下所示：

<input type="range" name="quantity" min="1" max="10">

在支持它们的浏览器中 ，它们如下所示：

现在一切都很好。 您可以将其用于任何要向用户收集具有强制最小值和最大值的号码的事情。

但是，有什么奇怪的发现吗？ 单独来说，该范围输入不会向用户传达他们实际将提交的数字。 现在，如果您输入的内容是“您感觉如何？ 左为悲伤，右为快乐。” –那么很好，您可能不需要向用户显示数字。 但是我敢打赌，与不显示数字相比，您需要显示数字更为普遍。

公平地说 ， 规范说 ：

输入元素表示一个控件，用于将元素的值设置为表示数字的字符串， 但需要注意的是，确切的值并不重要 ，这使UA提供的界面比Number状态更简单。

但是，来吧，仅仅因为我们想要一个炫酷的滑块并不能自动意味着我们应该防止用户知道所提交的值。 我不一定要说浏览器应该更改其UI控件以显示该数字。 我是说我们应该自己建立！

这是<output>标记的完美用例，它专门用于由表单元素计算的值。 这是如何使用它的超简单实现：

<input type="range" name="foo">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>

更新！ 带有Vanilla JavaScript的新版本也可以更好地工作。

我们的目标是显示一个“气泡”，该气泡显示范围输入的当前值。

从输入值中设置“气泡”的值只需拉动范围值并将其放入气泡中即可：

range.addEventListener("input", () => {
  bubble.innerHTML = rangel.value;
});

诀窍是沿定位的范围内输入的气泡所以滑动旁边的“拇指”。 为此，我们需要计算需要将气泡向左倾斜的百分比。 因此，让我们做一个函数来使事情保持清洁：

range.addEventListener("input", () => {
  setBubble(range, bubble);
});

function setBubble(range, bubble) {
  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;

  // Sorta magic numbers based on size of the native UI thumb
  bubble.style.left = newVal = "%";
}

在这里，我们确保考虑到范围输入的min和max属性，并根据该范围内的当前值计算0-100之间的百分比位置。 并非所有范围都是默认的0-100数字，因此可以说某个范围的值是50，范围是0到200，即25％。 这就是原因。

但是它有一个烦人的缺陷：气泡在开始时距离左侧太远，而在结束时距离右侧太远。 在范围输入上，拇指不会悬在左边缘，因此其中心在开始处，并且在末尾处相同。 像滚动条一样，拇指的边缘在轨道内停止。

我们可以在其中使用一些魔术数字，这些数字似乎在所有浏览器上都能很好地工作：

// Sorta magic numbers based on size of the native UI thumb
  bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;

这是最终的演示：

我被启发去解决这个问题，因为读者Max Globa写下了他们的版本，我将在这里发布：

Max版本的一个很酷的方面是范围输入是CSS样式的，因此可以知道拇指的确切大小。 有些数字在JavaScript数学中让人觉得很神奇，但是至少它们是基于CSS中设置的有关拇指大小的实数。

其他版本

戴夫·奥尔森移植的（原来的）主意，不会对jQuery的依赖。 这是该版本：

---

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

---

Simurai：

---

文森特·杜兰德（Vincent Durand）：

---

不要忘记， 范围输入可以包含数据列表 ， 这些数据列表上有一些小标记，这很酷。

---

安娜·都铎（Ana Tudor）拥有大量藏品 ，其中许多藏品都通过其设计来表明当前价值。

Post此帖子原始版本的旧版本（jQuery，加上也无法正常工作）

出于历史原因仅将其留在这里。

让我们拉入我们的朋友jQuery并获得我们CSS。 这个目标在下面。 任何范围输入，任何时间，任何最小/最大/步长–我们在其上方放置一个气泡，显示当前值。

让我们首先设置输出元素的样式。 我们将其绝对定位在输入上方。 一旦我们用JavaScript确定了应该是什么，这也使我们能够调整左值。 我们将用渐变和边界半径来修饰它，甚至添加一个带有伪元素的小三角形指针。

output { 
  position: absolute;
  background-image: linear-gradient(top, #444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}

现在我们需要做的是观察所有范围输入的值变化。 我们的目标是随着滑块的移动来移动气泡的左侧位置。 这不是世界上最简单的事情，因为滑块可以是任何宽度，也可以是任何最小值或最大值。 我们将不得不做一些数学运算。 以下是所有的jQuery JavaScript，评论如下：

// DOM Ready
$(function() {
 var el, newPoint, newPlace, offset;
 
 // Select all range inputs, watch for change
 $("input[type='range']").change(function() {
 
   // Cache this for efficiency
   el = $(this);
   
   // Measure width of range input
   width = el.width();
   
   // Figure out placement percentage between left and right of input
   newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
   
   // Janky value to get pointer to line up better
   offset = -1.3;
   
   // Prevent bubble from going beyond left or right (unsupported browsers)
   if (newPoint < 0) { newPlace = 0; }
   else if (newPoint > 1) { newPlace = width; }
   else { newPlace = width * newPoint + offset; offset -= newPoint; }
   
   // Move bubble
   el
     .next("output")
     .css({
       left: newPlace,
       marginLeft: offset + "%"
     })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');
});

其中的一个总部分就是那个1.3值。 我试图将气泡三角形的尖端与滑块的中心对齐。 这并不容易，因为滑块的中心永远不会向左或向右100％。 这个价值不是完美的，也不是完美实现的，但是总比没有它更好。

另外，不支持范围输入的浏览器仍会执行气泡操作。

上面的代码取决于具有指定min和max的范围输入。 如果他们不这样做，那就有点破门了。 我认为在不指定这些内容的情况下使用范围输入会很奇怪，尽管如果您不这样做，它们似乎默认为0和100。要证明这一点，您可以抓住每个属性，对其进行测试，如果没有，看起来不对，请修复它。 就像是：

var minValue, maxValue;
if (!el.attr("min")) { minValue = 0; } else { minValue = el.attr("min"); }

…然后在数学中使用minValue变量。 并做类似的最大。 无论如何，这是现场演示：

翻译自: https://css-tricks.com/value-bubbles-for-range-inputs/