title: JQuery UI slider : set min and max with attributes
body: <p>I need to work with <strong>several sliders</strong> in the same page. Therefore I've created a class for the sliders (so there's only one jquery code) and I want to set the <strong>max and min values to attributes</strong> of the divs. They will then change according to the slider selected.</p>
  
  <p>I'm guessing to do that I would need to use <code>this</code> at some point, or else it will target every class. Although I have no idea where to start or where to include it.</p>
  
  <p>For now I've just applied the basic code, here it is:</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div class="slider" slider-min="15" slider-max="250" svalue="132"&gt;&lt;/div&gt;&lt;span class="slider-value"&gt;&lt;/span&gt;
  &lt;div class="slider" slider-min="30" slider-max="300" svalue="165"&gt;&lt;/div&gt;&lt;span class="slider-value"&gt;&lt;/span&gt;
  &lt;div class="slider" slider-min="100" slider-max="500" svalue="300"&gt;&lt;/div&gt;&lt;span class="slider-value"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>.ui-slider { position: relative; text-align: left; background: #DADDD8; z-index: 0; }
  .ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; }
  .ui-slider .ui-slider-handle { background: #8FB339; position: absolute; z-index: 2; width: 15px; height: 15px; border-radius:5px; cursor:pointer; }
  .ui-slider  .ui-state-hover, .ui-slider  .ui-state-active { background: #4B5842; }
  .ui-slider .ui-slider-range { background: #C7D59F; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
  .ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; }
  
  
  .ui-slider-horizontal { height: 5px; width:100px; margin:5px auto; }
  .ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -5px; }
  .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
  .ui-slider-horizontal .ui-slider-range-min { left: 0; }
  .ui-slider-horizontal .ui-slider-range-max { right: 0; }
  
  .slider-value{
    font-size:12px;
    float:right;
    margin-top:-16px;
    margin-right:5px;
  }
  </code></pre>
  
  <p><strong>JS/JQUERY :</strong></p>
  
  <pre><code>  $( function() {
      var div = $(".slider");
      $( ".slider" ).slider({
        range: "min",
        slide: function( event, ui ) {
                  $( ".slider-value" ).html( ui.value );
              },
        min: div.data("slider-min"),
        max: div.data("slider-max"),
        value: div.data("svalue"),
  })});
  
  $( ".slider-value" ).html(  $(this).slider('value') );
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Cp9vH/14/" rel="nofollow noreferrer">Here</a> is this demo on <strong>jsfiddle</strong></p>
  
  <p>AND while I'm at it, I've got this other problem with the class/multiple sliders thing : when I want to <strong>display the current value</strong> of ONE slider, since it's a class it changes all the <code>.slider-value</code> spans. I do not know where to begin with this issue either.</p>
  
  <p>Thank you for your time/help :)</p>