Question

I am using JQuery and the JQuery UI Slider to render some controls in my HTML page and I want to set the range of the slider from an attribute in my HTML.

Here is the code I use to initialize the sliders…

$( ".slider" ).slider(
  {
    range: "min",
    value: 0,
    min: 0,
    max: 5,
    slide: handleSlide
  }
);

Of course the max value is hard coded. What I would like to do in my code is…

<div class="slider" id="sliderA" max="10"></div>

but I can’t figure out how to get at an attribute during selection.

I thought I may have access to it via this, like you do in JQuery’s .each() but firebug tells me it is the document, so that doesn’t work.

I want to do something like…

$( ".slider" ).slider(
  {
    range: "min",
    value: 0,
    min: 0,
    max: blah.getAttribute("max"),
    slide: handleSlide
  }
);

but I can’t figure out what blah might be.

Is there an accepted way to do this? I confess that JQuery still has a bit of black magic for me but I am working under the presumption that the selector resolves to an array of objects somehow, so it feels like I should be able to get at the elements.

Answer 1

    $( ".slider" ).each(function()
    {
     $(this).slider(
      {
        range: "min",
        value: 0,
        min: 0,
        max: $(this).attr("max"),
        slide: handleSlide
      }
    );
    });