CODEWITHSUNDEEP
jquery-uislidermaxminjquery-ui-slider
Yovo
Yovo

Reputation: 629

jquery UI slider min/max values

Can I put text min/max values for jquery ui slider and when scroll to appear digits? Here is an example, the left slider for max value has "no limit" and when you scroll it, appear digits.

Upvotes: 8

Views: 24234

Answers (3)

Shailesh Kalamkar
Shailesh Kalamkar

Reputation: 753

Destroy the slider first, which removes the slider functionality completely. This will return the element back to its pre-init state.

$("#selector").slider("destroy");

After that you can add new values to the slider as,

$("#selector").slider({
range: "max",
min: 0, // min value
max: 200, // max value
step: 0.1,
value: 200, // default value of slider
slide: function(event, ui) {
    $("#amount").val(ui.value);
}

});​

This works.

Upvotes: 0

Lalit Bhudiya
Lalit Bhudiya

Reputation: 4408

Yes we can set min-max 

$("#slider").slider({
    range: "max",
    min: 0, // min value
    max: 200, // max value
    step: 0.1,
    value: 200, // default value of slider
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});​

Upvotes: 11

Konstant
Konstant

Reputation: 2199

You are looking for the range slider. I hope the range slider demo helps. The min and max values can be set while initialising the slider.

Edited Sorry for misunderstanding the question. If you look at the source code of the demo you will see a small script that changes the values of element '#amount' when slider values are changed

Here is that script:

slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }

You can change this to display character values.

slide: function( event, ui ) {
            if (ui.values[0] == <min_value>) {
                 $( "#amount" ).val( "Min Limit" + " - $" + ui.values[ 1 ] );
            }
        }

You can modify this script according to your requirements

Note: I have not tested this.

Upvotes: 3

Related Questions