ustawianie parametrów suwaka jQuery ui z atrybutów danych html

Question

Chcę osadzić maks. Zakres moich suwaków w parametrze danych html. Zrobiłem trochę debug, i pomimo faktu, że dane mogą być dostępne i jest liczbą, suwak będzie nadal używać domyślnego max 100.

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

Zobacz ten fiddle

Answer 1

Gdy obiekt argument za slider() ocenia, this jest odniesienie doObiekt, a nie div.slider. trzeba by znaleźć div.slider ponownie lub zapisać odniesienie do niego (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); 
     } 
    }); 
}); 

Answer 2

użyć jQuery UI create wydarzenie option metody, aby ustawić opcje dynamicznie:

$(document).ready(function() { 
 
    $('div.slider').slider({ 
 
     min: 0, 
 
     create: function(event, ui) { 
 
      $(this).slider('option', 'max', $(this).data('max')); 
 
     }, 
 
     slide: function(event, ui) { 
 
      $("input#slider_value").val(ui.value); 
 
     } 
 
    }); 
 
});