HTML5 输入类型范围从正到负答案

【问题标题】：HTML5 input type range from positive to negativeHTML5 输入类型范围从正到负
【发布时间】：2015-03-03 20:54:07
【问题描述】：

有没有办法允许正最小值和负最大值？我正在尝试在日志空间 (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)）中。请注意，最小值为正数，最大值为负数，您可以相应地在两者之间切换。我正在寻求解决方法的帮助，以在输入类型范围内创建相同的行为。

【问题讨论】：

你能告诉我们一个大于 8 小于 -13 的数字吗？您应该交换最小最大值以使其工作。
Lolz dude -13 小于 8 你应该输入 min='-13' 和 max='8'
也许我不清楚。我希望规模从 8 开始并减少到 -13
反对票似乎不公平，这是一个完全有效的问题。
使用 step=1 将滑块从 0 缩放到 21。在更改处理程序中，计算 8 - $(this).val() 以提供您真正想要的缩放比例。

标签： javascript jquery html

【解决方案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！

【讨论】：

谢谢皮埃尔！对我来说看起来不错，这非常简单！在我接受之前，我会与网站的其他部分一起玩，看看它是否合适。
如果没有在许多浏览器/版本中进行全面测试，我不想依赖它。一定会有问题。
如果您正在寻找兼容性，即支持它，因为它支持滑块输入，因为 ie9 前缀和 ie10 通用：w3schools.com/cssref/css3_pr_transform.asp
这比需要编写值转换更好。假设您希望滑块值显示在输出标签中：使用这个简单的 CSS 技巧，值将是正确的，但使用值转换技术则不然。此外，如果您直接查询滑块，您将获得正确的值；其他提议的解决方案并非如此。
我们可以使用danielstern.ca/range.css更改滑块颜色 - 默认样式在rotateY(180deg)之后看起来很糟糕，“下填充”颜色在“错误”一侧

【解决方案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.

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

Working Demo

【讨论】：

我希望刻度从 8 减小到 -13（最小值 = 刻度的左侧）。问题是是否有人可以提出解决方法。 step=-1 似乎没有帮助（它增加了绝对步长值）