范围输入的价值气泡

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中文网其他相关文章！