CODEWITHSUNDEEP
javascriptjqueryjquery-uisliderjquery-ui-dialog
Pit
Pit

Reputation: 1488

jQuery ui slider max-value Problem

I'm new to jQuery-ui and having a problem initializing a jquery-ui-slider. I'm trying to create a slider having min and max values.

The slider should only have one handle, which should be initialized at some value, but somehow it is always set to max. I have however a span element in which I write the actual value of the slider and the value in this span is initialize correctly.

I initiate the slider as follows:

jQuery("#slider-range-min").slider({
    range: "min",
    min: 3,
    slide: function( event, ui ) {
        jQuery("#length").text(ui.value);
    }
});

The dialog in which the slider is embedded is initiated like this:

jQuery(".config_length").live('dblclick',function() {
    jQuery("#length-form").find("input[name=referer]").val(this.id);
    var max = jQuery(this).find("input[name$='_param']").val();
    var value = jQuery(this).find("input[name$='_value']").val();
    jQuery("#slider-range-min").slider("option","max", max);
    jQuery("#slider-range-min").slider("option","value", value);
    jQuery("#length").text(value);
    jQuery("#length-form").dialog("open");
});

'#slider-range-min' is the id of the slider, '#length-form' is the id of the dialog and '#length' the id of the span. Both variables 'max' and 'value' have the correct values (controlled with Firebug).

If for example 'max' is set to 250 and 'value' to 100, the value in the span would be 100, the handle on the slider would be at the right-most position (which should be 250?), but as soon as I click on the handle the value in the span will change to 249.

Edit

The Problem only occurs when the 'max' value is bigger then 100 (which is the default value for the max). Moreover it seems that order in which I set 'max' and 'value' also seems to influence the behaviour.

What am I doing wrong?

Upvotes: 2

Views: 5750

Answers (2)

Pit
Pit

Reputation: 1488

I found a way to make it work, but I don't think it should be necessary to do it this way:

    jQuery("config_length").live('dblclick',function() {
    jQuery("#length-form").find("input[name=referer]").val(this.id);
    var max = jQuery(this).find("input[name$='_param']").val();
    var value = jQuery(this).find("input[name$='_value']").val();
    if (max > 100) {
        jQuery("#slider-range-min").slider("option", "value", value).slider("option","max", max);
    } else {
        jQuery("#slider-range-min").slider("option","max", max).slider("option", "value", value);
    }
    jQuery("#length").text(value);
    jQuery("#length-form").dialog("open");
});

Even though it works now, I would like to know if there is no 'right' way to do it.

Upvotes: 1

Jura Khrapunov
Jura Khrapunov

Reputation: 1024

Actually when you are passing an object to "option" method os slider (second code snippet) it overwrites existing values, meaning all your initial options are nulls if not repeated in the new options object. Beside that "value" option is semantically affiliated to the initial value, if you are changing runtime value you have to use "value" method

instead of 

jQuery("#slider-range-min").slider("option",{
        max: max,
        value: value
    })

use 

jQuery("#slider-range-min").slider("option","max", max).slider("value", value);

Upvotes: 0

Related Questions