title: Jquery-ui-slider parameterizing min max and value
body: <p>I've a jquery-ui-slider script that transforms all inputs with special class into a slider.</p>
  
  <pre><code>// Create Jquery-ui Slider
  $(".create_slider").after('&lt;div class="slider"&gt;&lt;/div&gt;');
  //
  $(".slider").slider({
      value: $(this).siblings("input").val(),
      min: $(this).siblings("input").data("min"),
      max: $(this).siblings("input").data("max"),
      slide: function (event, ui) {
          $(this).siblings("input").val(ui.value);
      }
  });
  </code></pre>
  
  <p>Html is:</p>
  
  <pre><code>&lt;td&gt;
      &lt;input type="text" value="11" id="jpeg_compression" name="jpeg_compression" data-min="0" data-max="100" class="regular-text create_slider" readonly=""&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;
      &lt;p class="description"&gt;&lt;/p&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>But value-min-max don't work at all. <code>$(this).siblings("input").data("min")</code> doesn't work!</p>
  
  <p>I kind of understand why it doesn't work, but what are the solutions?</p>
  
  <p>I fixed value problem by using create:</p>
  
  <pre><code>                            //
                              //
                              // Create Jquery-ui Slider
                              $(".create_slider").after('&lt;div class="slider"&gt;&lt;/div&gt;');
                              //
                              $(".slider").slider({
                                min: $(this).siblings("input").data("min"),
                                max: $(this).siblings("input").data("max"),
                                slide: function(event, ui) {
                                  $(this).siblings("input").val(ui.value);
                                },
                                create: function(event, ui){
                                  $(this).slider('value',$(this).siblings("input").val());
                                }
                              });
  </code></pre>