是否可以使用 jquery 移动设备以降序排列输入类型="range" 值

Question

我正在尝试创建一个表单，其中的值根据您是向右滑动还是向左滑动而具有不同的权重。默认情况下 input type="range" 是按升序排列的？你知道一种让 class 下降的方法吗？

这是一个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>

Answer 1

这里有一个不使用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/

更新：为了能够重复使用它，您可以：

// For all .descendingSlider:
$(function() {
    $(".descendingSlider").bind("change", function() {
        var max = parseInt($(this).attr("max"));
        $(this).val(max - parseInt($(this).val()));
    });
});

或者更简洁的方法：

// 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();
});

https://jsfiddle.net/paska/dzah8qv1/2/

是否可以使用 jquery 移动设备以降序排列输入类型="range" 值

Is it possible to have input type="range" values listed in descending order using jquery mobile

forms

mobile

jquery

slider

range