How to change input direction in HTML5 format?

Question

To have a slide bar in HTML5, we can use range input. i.e.

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

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

I know I can do this with Javascript. Is there a way to do this with HTML only?

---

The answer to a "possible duplicate question":

This question is being solved by javascript, and I ask only for HTML solution. I think it is obvious that this is not duplication?

Answer 1

This can do the trick: setting the input direction from right to left on CSS

 #reversedRange { direction: rtl } 

See the sample code below :

PS javascript / jquery code is intended only to illustrate changes in values ​​and is not needed. Only CSS attribute and id in input element

Updated: based on comments @ 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> 

Answer 2

It is simple with CSS and pure JavaScript . I hope this snippet helps you.

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