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

Question

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

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

默认行为是左侧有最小值，右侧有最大值。有没有办法可以将最大值放在左侧？

我知道我可以用 Javascript 做到这一点。有没有办法单独使用 HTML 来做到这一点？

---

回复“可能重复的问题”：

该问题接受 javascript 解决方案，我要求仅提供 HTML 解决方案。我觉得很明显不是重复？

Answer 1

这可能会奏效：在 CSS 上将输入的方向设置为从右到左

#reversedRange {
  direction: rtl
}

参见下面的示例代码：

PS javascript/jquery 代码只是为了说明值的变化，它不是必需的。只有 CSS 和 input 元素上的 id 属性

更新：基于 @MCTaylor17 的 cmets（感谢）

$(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>

Answer 2

这只是简单地使用 CSS 和纯 JavaScript。我希望这个 sn-p 对你有帮助。

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>

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>