html - 如何反转 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 代码只是为了说明值的变化，不需要它。只有 input 元素上的 CSS 和 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>