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中。请注意，最小值为正数，最大值为负数，因此您可以在两者之间进行相应的步骤。我在寻求解决方案的帮助，以创建与输入类型范围相同的行为。

Answer 1

您可以简单地切换限制并将值乘以-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 2

这个滑块将被反转:min(左)为8，max(右)为-13，我认为这是您想要的.步骤=-1不起作用。

HTML：

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

css：

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

Thx css！

Answer 3

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

在更改处理程序中，计算8 - $(this).val()以给出实际需要的缩放。

<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);
});

演示