javascript - jQuery UI Slider with fixed minimum: show minimum range, not minimum absolute value? - Stack Overflow

admin管理员组

文章数量:1317915

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?

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?

• javascript
• jquery
• jquery-ui
• jquery-ui-slider

Share Improve this question Follow asked Jul 18, 2012 at 16:20 flossfanflossfan 10.9k1616 gold badges4545 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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/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.

本文标签：