CODEWITHSUNDEEP
htmlsliderrange
alital
alital

Reputation: 431

Flipped Range/Slider input html

Does anyone know how to achieve this? so eg. it starts from max to low (left to right):

---------------------||---------------------

100__________50__________20

Upvotes: 1

Views: 164

Answers (1)

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

Check this out JSFiddle Link.

HTML Part:

<input id="slider2" type="range" min="0" max="100" step="50" value="0" >
<input id="rangeValue2" type="text" size="2">

JavaScript Part:

var max_range = 100;
var range_element = document.getElementById("rangeValue2");
var range_input_element = document.getElementById("slider2");
range_element.value = max_range - range_input_element.value;
document.getElementById("slider2").onchange=function(){
    range_element.value = max_range - range_input_element.value;
};

Note: Max range should be same in HTML and JavaScript. Like in html it is set as max="100" and in JavaScript it is set as var max_range = 100;

Upvotes: 1

Related Questions