HTML5 输入类型范围从正到负

Question

有没有办法允许正最小值和负最大值？我正在尝试在 log space (10^8-10-13) 中创建滑块，并希望在滑块上显示指数。

<input  type="range" min="8" max='-13' value="1" step="-1" id="myRange" >

这目前恢复为默认 max=100 值。

或者我可以通过某种方式反转滑块吗？任何帮助将非常感激。

编辑：请记住我希望比例从 8 减少到 -13（log space 10^8-10^-13）。

编辑：在 IDL 中 xr=[8,-13]（或 R xlim=c(8,-13)）。请注意，最小值为正数，最大值为负数，您可以相应地在两者之间切换。我正在寻求解决方法的帮助，以创建与输入类型范围相同的行为。

Answer 1

您添加了逻辑上不满足的条件。您需要交换最小值和最大值才能使滑块工作：

 <input type="range" min="-13" max='8' value="1" step="1" id="myRange" >

Working Demo

Answer 2

这个滑块会反转：min(left) 是 8，max(right) 是 -13，我想这就是你想要的......而 step=-1 不工作。

HTML:

<input type="range" min="-13" max="8" value="1" step="1" id="range"/>

css:

#range{
    transform: rotateY(180deg);
}

谢谢css！

Answer 3

我认为没有办法允许正最小值和负最大值，但对于给定的情况，我们可以使用 min = -8 和 max = 13 并且在更改时我们将在变量中分配负范围值.例如，

<script>
var exponent=1;
</script>
<input  type="range" min="-8" max='13' value="-1" step="1" id="myRange" onchange="document.exponent = - this.value;">

Answer 4

您可以简单地切换限制并将值乘以 -1:

<input  type="range" min="-8" max='13' value="1" step="1" id="slider" >

$('#slider').change(function(){
    var val = -+($(this).val());
    console.log(val);
});

如果您需要提交该值，请将其复制到隐藏字段，并在服务器端使用该值而不是原始值。

A live demo at jsFiddle.

Answer 5

将滑块从 0 缩放到 21，步长 = 1。

在更改处理程序中，计算 8 - $(this).val() 以提供您实际想要的缩放比例。

HTML

<input type="range" min="0" max='21' value="7" step="1" id="myRange">

Javascript

$('#myRange').change(function () {
    var scaledValue = 8 - $(this).val();
    console.log(scaledValue);
});

DEMO

HTML5 输入类型范围从正到负

HTML5 input type range from positive to negative

html

javascript

jquery