HTML5 输入范围：允许“min”大于“max”（从 到）

Question

我<input type="range" />需要min=""- 值大于 max=""- 值，
例如从 100 到 的 0值：

<input type="range" min="100" max="0" />

这在某种程度上可能吗？使用 JavaScript 就可以了。

这是我的意思的演示：

<input type="range" min="100" max="0" />

我基本上想要一个从-到滑块，而不是最小 - 最大

---

编辑：我不希望发生这种情况：（滑块颜色也会翻转） 这是通过我的例子完成的，direction: rtl;而且transform: scaleX(-1);transform: rotate(180deg);

Answer 1

要回答您的问题，在不严重破坏输入的情况下，不可能使最小值高于最大值或包含 from 或 to 属性

\n\n

只需确保您使用的最终数字是 100减去滑块大小即可。

\n\n

我还会添加一个隐藏输入，并更新该输入的值 \xe2\x80\x93，因为您将value用此方法弄乱滑块的实际值。

\n\n

\r\n

\r\n

0 to 100: (this is working)\r\n<input type="range" min="0" max="100" step="any" style="width: 100%" \r\n       oninput="document.getElementById(\'test\').innerHTML = this.value" \r\n       onchange="document.getElementById(\'test\').innerHTML = this.value" />\r\n<br />\r\n\r\n100 to 0: (not working in IE, Edge, Firefox and Chrome*)\r\n<input type="range" min="0" max="100" step="any" style="width: 100%"\r\n       oninput="document.getElementById(\'test\').innerHTML = 100 - parseInt(this.value)" \r\n       onchange="document.getElementById(\'test\').innerHTML = 100 - parseInt(this.value); document.getElementById(\'slider-value\').value = 100 - parseInt(this.value)" />\r\n<br />\r\nHidden input <input type="text" id="slider-value">\r\n<div id="test"></div>

\r\n

\r\n

\r\n

\n\n

编辑2：w3 https://www.w3.org/wiki/HTML/Elements/input/range有此概述，不幸的是范围输入没有您需要的属性。如果您需要进行定制输入，您可以进行一些作弊。有趣的是，我做了一个基于范围的输入，它可以在一定程度上接受鼠标滚轮事件 \xe2\x80\x93 \xe2\x80\x93 但了解我如何隐藏输入并将其替换为另一个接口可能很有用：http ://codepen.io/EightArmsHQ/pen/CfmeE

\n