Définition des paramètres du curseur jQuery ui à partir des attributs de données html

Question

Je souhaite intégrer la plage maximale de mes curseurs dans un paramètre de données html. Je l'ai fait une mise au point, et en dépit du fait que les données au maximum de défaut 100.

sont accessibles et est un nombre, le curseur sera encore utiliser mon HTML:

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

Mon Javascript:

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

Voir cette fiddle

Answer 1

Lorsque l'objet d'argument pour slider() est évaluée, this est une référence au document objet, pas div.slider. Vous auriez besoin de trouver div.slider nouveau ou enregistrer une référence à elle (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

Utilisez l'événement jQuery UI create avec option méthode pour définir les options dynamiquement:

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