我可以在点击时使范围输入的值上下变化吗？答案

【问题标题】：Can I make a range input's value step up and down on click?我可以在点击时使范围输入的值上下变化吗？
【发布时间】：2018-08-23 14:29:43
【问题描述】：

假设我有一个<input type=range min=0 max=100 step=1 />。如果我聚焦输入，然后用键盘上下移动，值会相应改变。当我单击范围内的任意点时，该值会跳转到我单击鼠标的位置。这对许多应用程序来说都是有意义的，但是我是否可以改变这种行为以使值上下移动，就好像我向上或向下移动了箭头键一样？这对许多科学应用都很有意义。

我在此处的范围输入规范中找不到有关鼠标行为的具体信息： https://html.spec.whatwg.org/#range-state-(type=range)

也许这里有人有答案？

【问题讨论】：

不要认为这是默认功能。如果您在输入顶部放置另一个元素，您也许可以自己实现它，这样您就可以“捕捉”那里的点击；然后您必须弄清楚该点击是发生在当前位置/值的左侧还是右侧，才能知道您是否必须增加或减少该值。但是比拖动“旋钮”来设置值不再起作用了。如果您只是在它旁边提供额外的 [+]/[-] 按钮，以便用户可以点击这些按钮，可能会更有意义（并且会更容易实现）。
我不明白你想做什么
@MarcoSalerno，如果你安装了 Flash，你可以看到我试图在这个 Flash 程序中得到的行为。尝试使用底部的滑块 - 看看单击旋钮左右的行为如何。 cse.unl.edu/~astrodev/flashdev2/transitSimulator/…

标签： html user-interface input

【解决方案1】：

你可以这样做。

<!DOCTYPE html>
<script> var oldValue = 50; </script>
<input type=range max=100 step=1 oninput=" if (oldValue) { this.value = this.value > oldValue ? oldValue + 1 : oldValue - 1; } oldValue = parseInt(this.value, 10);">

【讨论】：

不错的解决方案，但它仍然会阻塞处理程序
谢谢！拖动行为略有偏差，但它基本上可以工作，也许可以改进。点击行为是完美的。完成后我将在此处发布我的最终版本 - 我正在做一些调整以使步长动态化，并使其在我的 React 应用程序中工作。
这是一个基于 zcorpan 方法的 React 组件：github.com/ccnmtl/astro-interactives/blob/master/…
对于任何感兴趣的人，这里有一个不限制旋钮拖动行为的版本：pastebin.com/XRFjmbR8，在 React 中：pastebin.com/HZE7419W

【解决方案2】：

我只是为你做的：

$("#rangecontainer").mousedown(function(event){
  event.preventDefault();
  var rangeInput = $(this).children();
  var actualValue = parseInt(rangeInput.val());
  if(event.pageX > (rangeInput.position().left + 15 + actualValue)){
    rangeInput.val(actualValue+1);
  }
  else{
    rangeInput.val(actualValue-1);  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rangecontainer"><input type="range" min="0" max="100" step="1" /></div>

编辑：通过向左侧添加 15px，您可以避免位置平衡器错误

【讨论】：

谢谢！！惊人的。这几乎是完美的。不过，我可能可以从这里拿走它。两件事： 1. 上/下差异应该定义在旋钮所在的点，而不是滑块的中心。 2.拖动旋钮应该还是可以的。我可能可以在 JavaScript 中实现这一点，但我真的希望 HTML 标准中的一些配置能够自动完成。
这不仅可以防止拖动手柄（如果需要此功能），而且在我的情况下，方向切换的点与手柄不对齐。
我确定一定是手工制作的，反正我给了你一个起点，希望对你有帮助！ ^^