title: setting jQuery ui slider params from html data attributes
body: <p>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.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="slider" data-max="10"&gt;&lt;/div&gt;
  &lt;label for="slider_value"&gt;Slider Value:&lt;/label&gt;
  &lt;input type="text" id="slider_value" /&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $("div.slider").slider({
          min: 0,
          max: $(this).data("max"),
          slide: function (event, ui) {
              $("input#slider_value").val(ui.value);
          }
      });
  });
  </code></pre>
  
  <p>See this <a href="http://jsfiddle.net/danahinds57/Cp9vH/1/" rel="noreferrer">fiddle</a></p>