翻转范围/滑块输入html

Question

有谁知道如何实现这一目标？ 所以，例如。它从最高到低（从左到右）开始：

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

100 __________ 50 __________ 20

Answer 1

查看JSFiddle链接。

HTML部分：

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

JavaScript部分：

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

注意： HTML和JavaScript中的最大范围应相同。 就像在html中一样，它设置为max="100"，在JavaScript中设置为var max_range = 100;