CODEWITHSUNDEEP
jquery-ui
Frank
Frank

Reputation: 624

customizing the jQuery UI range slider

I'm using the jQuery UI plugin called "range slider" (see http://jqueryui.com/slider/#range) and I'm wondering how to change the intervals from '1' to '10', so that a user gets 10, 20, 30, ...until 1000 when using the slider.

This is my code: 

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

});

Thanks in advance for your help!

Upvotes: 0

Views: 994

Answers (1)

blgt
blgt

Reputation: 8205

The step option does exactly what you described:

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

Note that I've changed min to 0 as it's better to have a number divisible by the step.

Here's a fiddle: http://jsfiddle.net/gL42daep/

Also note that the code in the question (in the fiddle) has some inconsistencies, possibly as a side effect of posting it here: #max and #min, when setting from the slider, get an extra euro sign with their numeric value; however you need to delete that if you want to use those numeric values to set the slider.

Upvotes: 1

Related Questions