Is it possible to have input type = "range" values in descending order using jquery mobile
I am trying to have a form where the values are weighted differently depending on whether you slide to the right or slide to the left. Is the default input type = "range" in ascending order? Do you know a way to make the class one way to go down?
Here is a fiddle: https://jsfiddle.net/jacoblett/dzah8qv1/
<label for="slider-step">Ascending:<br/>
0, 2, 4, <b>5</b>, 6, 8, 10
</label>
<input type="range" name="slider-step" id="slider-step" value="5" min="0" max="10" step="2" />
<label for="slider-step">How to get descending? <br/>
10, 8, 6, <b>5</b>, 4, 2, 0
</label>
<input type="range" name="slider-step" id="slider-step" value="5" min="0" max="10" step="2" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
+3
source to share
1 answer
There is a solution here without using jQuery UI.
$(function() {
var max = parseInt($("#slider-step2").attr("max"));
$("#slider-step2").bind("change", function() {
$("#slider-step2").val(max - parseInt($("#slider-step2").val()));
});
});
https://jsfiddle.net/paska/dzah8qv1/1/
Refresh . To reuse it, you can:
// For all .descendingSlider:
$(function() {
$(".descendingSlider").bind("change", function() {
var max = parseInt($(this).attr("max"));
$(this).val(max - parseInt($(this).val()));
});
});
Or a cleaner way:
// A function and an "automatic creation" for the .descendingSlider:
$.fn.descendingSlider = function() {
$(this).data("max", parseInt($(this).attr("max")));
$(this).bind("change", function() {
var max = $(this).data("max");
$(this).val(max - parseInt($(this).val()));
});
};
$(function() {
$(".descendingSlider").descendingSlider();
});
+1
source to share