एचटीएमएल डेटा विशेषताओं से jQuery ui स्लाइडर पैराम्स सेट करना

Question

मैं अपने स्लाइडर्स रेंज को अधिकतम HTML डेटा पैरामीटर में एम्बेड करना चाहता हूं। मैं कुछ डिबग किया था, और तथ्य यह है कि डेटा पहुँचा जा सकता है और एक नंबर है के बावजूद, स्लाइडर अभी भी 100

की डिफ़ॉल्ट अधिकतम उपयोग करेगा मेरे HTML:

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

मेरे जावास्क्रिप्ट:

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

देखें इस fiddle

Answer 1

जब slider() के लिए तर्क वस्तु मूल्यांकन किया जाता है, thisलिए एक संदर्भ हैऑब्जेक्ट, div.slider नहीं।

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

गतिशील विकल्पों को सेट करने option विधि के साथ jQuery यूआई create घटना का उपयोग करें::

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

आप div.slider फिर से खोजने या ( demo) यह करने के लिए एक संदर्भ को बचाने की जरूरत होगी