如何在HTML5范围输入中反转方向？

Question

要在HTML5中拥有一个滑动条，我们可以使用范围输入。

<input type="range" min="0" max='5' value="0" step="1" >

默认情况下，最小值位于左侧，最大值位于右侧。是否有办法将最大值放在左侧？

我知道可以使用JavaScript实现此操作。是否有仅使用HTML的方法来实现？

---

"possible duplicate question"的回复：

那个问题接受JavaScript解决方案，而我正在询问是否有仅使用HTML的解决方案。我认为很明显这不是重复的问题？

- cytsunny

---

可能是HTML5输入类型范围从正到负的重复问题。 - Brad

这不是被接受的答案，但这里有一个CSS解决方案：https://dev59.com/jF4c5IYBdhLWcg3wia5P#27794806 - Brad

Answer 1

这个可能会有用：在CSS中将输入的方向设置为从右到左。

#reversedRange {
  direction: rtl
}

参考代码如下:

PS：JavaScript/jQuery 代码仅用于说明值的变化和没有必要。仅需使用CSS和input元素上的id属性。

更新: 基于 @MCTaylor17 的评论（感谢）

$(function() {
  $("#rangeValue").text($("#reversedRange").val());
  
  $("#reversedRange").on('change input', function() {
    $("#rangeValue").text($(this).val());
  });
});

#reversedRange {
  direction: rtl
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min
<div>value: <span id="rangeValue"></span>
</div>

- blurfus

---

感谢direction: rtl属性。这不是纯HTML，但至少比那些JavaScript解决方案要好得多。而且，它足够短以放入内联样式中。 - cytsunny

不错的技巧。顺便提一下，如果在事件中添加“input”（例如.on("change input"），它将实时更新。 - MCTaylor17

Answer 2

这只需要使用 CSS 和纯 JavaScript 就可以实现。希望这段代码能对您有所帮助。

CSS & HTML

input{
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

Max<input type="range" min="0" max='5' value="0" step="1" onmousemove="document.getElementById('Range_Value').innerHTML=this.value" onchange="document.getElementById('Range_Value').innerHTML=this.value">Min

<h3>Value: <span id="Range_Value">0</span></h3>

- Raeesh Alam

---

这种解决方案的缺点是键盘输入被颠倒了——按左箭头会使拇指向右移动，按右箭头会使拇指向左移动。 - Richard Deeming

为什么要这样做，当你可以简单地使用direction: rtl呢？另一个解决方案要简单得多。 - setholopolus

Answer 3

另一种方法是在不改变范围外观或功能的情况下进行操作：

$("#reversedRange").on('change input', function() {
  var output = Math.abs($(this).val());
  $("#rangeValue").text(output);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="-5" max='0' value="-5" step="1" id="reversedRange">

<h3>Selected Value is: <span id="rangeValue"></span></h3>

- Ludo - Off the record

---

我是在寻求不使用JavaScript的解决方案，否则已经有许多类似的问题存在，这个问题会被标记为重复问题。 - cytsunny

你可以不使用JavaScript来实现这个功能，我只是添加了它以便显示结果。无论如何，你需要在某个时候处理表单数据，所以你可以轻松地将负值转换为你可以使用的内容。 - Ludo - Off the record

我不确定那个JavaScript是否只是用于显示，因为似乎* -1是必要的？ - cytsunny

这只是从值中删除“-”，因为滑块返回-5到0的值。您也可以在前端使用Math.abs()，或者在后端使用您用于处理表单数据的任何语言来执行此操作。 - Ludo - Off the record

我将删除-1，因为* -1可以移动到后端进行处理，但我必须说CSS解决方案更好，特别是当您需要处理负值时。 - cytsunny