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（左）为8，max（右）为-13，我认为这是你想要的......而step = -1不起作用。
/> HTML：

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

的CSS：

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

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

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

A live demo at 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);
});

<强> DEMO

Answer 4

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

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

<强> Working Demo

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;">

HTML5输入类型范围从正到负

5 个答案: