Geek asks and answers

JQuery UI Slider with fixed minimum: show minimum range, not minimum absolute value?

I am using a jQuery slider with a fixed minimum of 20, as described in the docs .

However, this is not quite what I need. I would like the slider's visibility range to be 0-100, but the user is never allowed to move the slider to less than 20.

In other words, the slider handle should never go all the way to the left side of the slider (as it is currently happening), but should show a range of 0-20.

Here is the JSFiddle to show what I mean , and here is the current code:

$("#range-slider").slider({
    range: "min",
    min: 20,
    max: 100, 
    value: 20,
    step: 20,
});

Any ideas?

+5
source share
1 answer

,

$(document).ready(function() {

    // I want the visual range to be 0-100, 
    // but the minimum allowed value to be 20 - 
    // so in other words, the handle never gets
    // all the way to the LHS of the slider, 
    // but shows the range 0-20. 
    // Is this possible? 
    $("#range-slider").slider({
        range: "min",
        min: 0,
        max: 100,
        value: 20,
        step: 20,
        slide: function(event, ui) {
            if (ui.value < 20) {
                return false;
            }
        }
    });

});

http://jsfiddle.net/nicolapeluchetti/kGtsN/17/

. ui.value( ), , $(..). slider ('value', index), handle.

false, ui.value.

+8

More articles:


All Articles