How To Reverse The Direction In Html5 Range Input?

To have a slidebar in HTML5, we may use range input. i.e. The default behavior is to have minimum value on the left

Solution 1:

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

#reversedRange {
  direction: rtl
}

See sample code below:

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

Updated: based on comments by @MCTaylor17 (thanks)

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

#reversedRange {
  direction: rtl
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Max<inputtype="range"min="0"max='5'value="0"step="1"id="reversedRange">Min
<div>value: <spanid="rangeValue"></span></div>

Solution 2:

This is simply do with CSS and pure JavaScript. I hope this snippet will help you.

CSS & HTML

input{
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

Max<inputtype="range"min="0"max='5'value="0"step="1"onmousemove="document.getElementById('Range_Value').innerHTML=this.value"onchange="document.getElementById('Range_Value').innerHTML=this.value">Min

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

Solution 3:

Another way without changing the way the range looks or works:

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputtype="range"min="-5"max='0'value="-5"step="1"id="reversedRange"><h3>Selected Value is: <spanid="rangeValue"></span></h3>