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代码仅用于说明值的变化，而不需要它。只有id元素上的CSS和input属性

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

＆＃13;

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

＆＃13;

#reversedRange {
  direction: rtl
}

＆＃13;

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

＆＃13;

Answer 2

这只是使用 CSS 和纯 JavaScript 。我希望这段代码可以帮到你。

CSS＆amp; 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>

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>

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

3 个答案: