ayarı jQuery ui html veri özniteliklerinin kaydırıcıları

Question

Kaydırıcılarım menzilini bir html veri parametresine gömmek istiyorum. Bazı hata ayıklama yaptım ve veri erişilebilir ve bir sayıdır edilebileceği gerçeğine rağmen, sürgü hala 100'e

varsayılan max kullanacaktır Benim HTML:

<div class="slider" data-max="10"></div> 
<label for="slider_value">Slider Value:</label> 
<input type="text" id="slider_value" /> 

Benim JavaScript:

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

bu fiddleslider() için bağımsız değişken nesne değerlendirilir

Answer 1

, thisiçin bir referans görnesnesi, div.slider değil.

$(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

dinamik seçeneklerini ayarlamak için option yöntemi ile jQuery UI create olayı kullanın:

$(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); 
 
     } 
 
    }); 
 
});

Tekrar div.slider bulmak ya da bir başvuru ( demo) kurtarmak gerekiyordu