setting jQuery ui slider params from html data attributes

Question

I want to embed the max of my sliders range in an html data parameter. I did some debug, and despite the fact that the data can be accessed and is a number, the slider will still use the default max of 100.

My HTML:

<div class="slider" data-max="10"></div>
<label for="slider_value">Slider Value:</label>
<input type="text" id="slider_value" />

My Javascript:

$(document).ready(function () {
    $("div.slider").slider({
        min: 0,
        max: $(this).data("max"),
        slide: function (event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});

See this fiddle

Jeffery To · Accepted Answer · 2013-02-07 09:12:09Z

9

+50

When the argument object for slider() is evaluated, this is a reference to the document object, not div.slider. You'd need to find div.slider again or save a reference to it (demo):

$(document).ready(function () {
    var div = $("div.slider");
    div.slider({
        min: 0,
        max: div.data("max"),
        slide: function (event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});

answered Feb 7, 2013 at 9:12

Jeffery To

12k1 gold badge29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola K. · Accepted Answer · 2015-09-13 19:29:12Z

4

Use the jQuery UI create event with option method to set options dynamically:

$(document).ready(function() {
    $('div.slider').slider({
        min: 0,
        create: function(event, ui) {
            $(this).slider('option', 'max', $(this).data('max'));
        },
        slide: function(event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});

edited Sep 13, 2015 at 19:29

answered Oct 30, 2014 at 21:24

Nikola K.

4413 silver badges10 bronze badges

1 Comment

Hüseyin Sekmenoğlu Over a year ago

This solution is better when using multiple sliders

Collectives™ on Stack Overflow

setting jQuery ui slider params from html data attributes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related