如何在HTML5范围输入中反转方向? [英] How to reverse the direction in HTML5 range input?

问题描述

要在HTML5中使用滑动条，我们可以使用范围输入.即

To have a slidebar in HTML5, we may use range input. i.e.

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

默认行为是在左侧具有最小值，在右侧具有最大值.有什么方法可以将最大值放在左侧吗?

The default behavior is to have minimum value on the left side and maximum value on the right side. Is there a way I can put the maximum value on the left side instead?

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

I know I can do that with Javascript. Is there a way to do that with HTML alone?

回答可能重复的问题":

该问题接受javascript解决方案，而我正在寻求仅HTML解决方案.我认为这显然不是重复的吗?

That question accept javascript solution, and I am asking for HTML only solution. I think it is obvious that it is not a duplication?

推荐答案

这可能会解决问题:将输入方向设置为在CSS上从右到左

This might do the trick: setting the direction of the input to be right to left on the CSS

#reversedRange {
  direction: rtl
}

请参见下面的示例代码:

PS的javascript/jquery代码仅用于说明值的更改，因此不需要.仅CSS和 input 元素

PS the javascript/jquery code is only to illustrate the values changing and it's not needed. Only the CSS and the id attribute on the input element

更新:基于@ MCTaylor17的评论(谢谢)

Updated: based on comments by @MCTaylor17 (thanks)

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

这篇关于如何在HTML5范围输入中反转方向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！