setting jQuery ui slider params from html data attributes

jquery-ui

Solution

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);
        }
    });
});

Problem

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

Original source