Question

我正在使用名为“范围滑块”的jQuery UI插件（请参阅http://jqueryui.com/slider/#range），我想知道如何将间隔从“1”更改为“10”，以便用户获得10， 20,30，...使用滑块时直到1000.

这是我的代码：

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 1000,
        values: [ 75, 300 ],
        slide: function( event, ui ) {

            var offset1 = $(this).children('.ui-slider-handle').first().offset();
            var offset2 = $(this).children('.ui-slider-handle').last().offset();
            $(".tooltip1").css('top',offset1.top).css('left',offset1.left).show();
            $(".tooltip2").css('top',offset2.top).css('left',offset2.left).show();


            $('#min').val("€ " + ui.values[ 0 ]);
            $('#max').val("€ " + ui.values[ 1 ]);

        },
        stop:function(event,ui){
            $(".tooltip").hide();
        }
    });

$('#min').change(function(){
    $( "#slider-range" ).slider( "values", 0, $('#min').val()  );
});
$('#max').change(function(){
    $( "#slider-range" ).slider( "values", 1, $('#max').val()  );
});

});

提前感谢您的帮助！

Answer 1

The step option完全符合您的描述：

$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 1000,
    values: [ 100, 300 ],
    step: 10
}

请注意，我已将min更改为0，因为将某个数字整除为该数字会更好。

这是一个小提琴：http://jsfiddle.net/gL42daep/

另请注意，问题中的代码（在小提琴中）有一些不一致，可能是在此处发布它的副作用：#max和#min，当从滑块设置时，得到一个额外的欧元符号及其数值;但是如果要使用这些数值来设置滑块，则需要删除它。

自定义jQuery UI范围滑块

1 个答案: