CODEWITHSUNDEEP
jqueryhtmljquery-ui
Jack M.
Jack M.

Reputation: 1170

Jquery ui ranges

My jquery-ui range slider behaves illogically. Can anyone explain why only one of the sliders here work? Note that on the actual page there are more than 2 sliders.

http://jsfiddle.net/uVeUD/

The point of this code is to change all my sliders at once using variables in the code. However, as you can see in the fiddle, if it does not have the same value as min, it will not work. What is the reason for that? 

$( "div.slider-div" ).each(function(){
    obj = $("input", $(this).parent());
    $(this).slider({
       range: "min",
       value: obj.val(),
       min: obj.attr("min"),
       max: obj.attr("max"),
       slide: function( event, ui ) {
           $("input", $(this).parent()).val( ui.value );
           $("input", $(this).parent()).change();
       }
    });   

    obj.val( $(this).slider("value") ); 
});

I need things that work so I am open to alternative suggestions for sliders if no one can fix it.

Upvotes: 0

Views: 88

Answers (2)

adeneo
adeneo

Reputation: 318182

obj is global, and you're passing strings and not integers to the options of the slider :

$(".slider-div").each(function () {
    var obj = $(this).siblings('input');
    $(this).slider({
        range: "min",
        value: parseInt(obj.val(),10),
        min  : parseInt(obj.attr("min"),10),
        max  : parseInt(obj.attr("max"),10),
        slide: function (event, ui) {
            $(event.target).siblings('input').val(ui.value).trigger('change');
        }
    });
});

FIDDLE

You could also set the options for the slider with data attributes.

Upvotes: 2

WooCaSh
WooCaSh

Reputation: 5212

Change attr to data-val instead of val. Look here:

<input type="range" style="border:0px;margin-left:10px;" value="40" data-min="8" data-max="72" id="shadow-size-2">

http://jsfiddle.net/uVeUD/1/

Is it what you want?

Upvotes: 1

Related Questions