如何在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和元素id上的属性input

更新: 基于@ 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>

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

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