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

Question

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

However, it's not quite what I need. I'd like the visual range of the slider to be 0-100, but the user should never be allowed to move the slider to less than 20.

In other words, the handle of the slider should never go all the way to the left-hand side of the slider (as it does at the moment), but should show the range 0-20.

Here is a 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?

Answer 1

You should use the slide function and enforce that

$(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/

From the docs

Slide

This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

Return false in order to prevent a slide, based on ui.value.