HTML5 输入类型范围从正面到负面

Question

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

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

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

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

编辑：请记住，我希望比例从 8 减少到 -13（日志空间 10^8-10^-13）。

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

Answer 1

此滑块将反转：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 2

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

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

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

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

jsFiddle 的现场演示。

Answer 3

使用 step=1 将滑块从 0 缩放到 21。

在更改处理程序中，计算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);
});

演示

Answer 4

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

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

工作演示

Answer 5

我认为没有办法允许正的最小值和负的最大值，但是对于给定的情况，我们可以使用 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;">