NoUISlider टूलटिप केवल पूर्णांक दिखाएं

Question

मैं चाहता हूं कि मेरे स्लाइडर पर टूलटिप केवल "130" और "130.00" जैसे पूर्णांक दिखाए। मुझे नहीं पता कि मैं कहां से शुरू कर सकता हूं।

यहाँ मेरी कोड है:

$(document).ready(function() { 
var groesseslider = document.getElementById('slider-tooltip'); 

noUiSlider.create(groesseslider, { 
    start: [ 145 ], 
    step: 1, 
    range: { 
     'min': 100, 
     'max': 250 
    } 
}); 
    }); 
$(document).ready(function() { 
    var groesseslider = document.getElementById('slider-tooltip'); 
var tipHandles = groesseslider.getElementsByClassName('noUi-handle'), 
    tooltips = []; 

// Add divs to the slider handles. 
for (var i = 0; i < tipHandles.length; i++){ 
    tooltips[i] = document.createElement('div'); 
    tipHandles[i].appendChild(tooltips[i]); 
} 

// When the slider changes, write the value to the tooltips. 
groesseslider.noUiSlider.on('update', function(values, handle){ 
    tooltips[handle].innerHTML = values[handle]; 
}); 
    }); 

मेरे जे एस कोड: http://jsfiddle.net/miiauwz/66a5ahm0/

Answer 1

आप या तो noUISlider के प्रलेखन के बारे में events and their binding

slider.noUiSlider.on("update", function(values, handle, unencoded) { 
    // values: Current slider values; 
    // handle: Handle that caused the event; 
    // unencoded: Slider values without formatting; 
}); 

या किसी अन्य रूप में वर्णित की तरह unencoded मूल्य का उपयोग करके देखें संभावना format option on slider creation का उपयोग कर रही होगी (लेकिन अभी तक इसे स्वयं नहीं किया है):

noUiSlider.create(slider, { 
    start: [ 20000 ], 
    ... 
    format: wNumb({ 
     decimals: 0, // default is 2 
     thousand: '.', // thousand delimiter 
     postfix: ' (US $)', // gets appended after the number 
    }) 
}); 

दोष यह है तुम यहाँ से अलग wNumb पुस्तकालय डाउनलोड करने के लिए है: http://refreshless.com/wnumb/।

var sliderFormat = document.getElementById('slider-format'); 

noUiSlider.create(sliderFormat, { 
    start: [ 20 ], 
    ... 

    format: { 
     to: function (value) { 
     return value + ',-'; 
     }, 
     from: function (value) { 
     return value.replace(',-', ''); 
     } 
    } 
}); 

Answer 2

मैं:

---

wNumb

बिना एक और तरीका है noUISlider से उदाहरण पर फिर से विचार करने के बाद, मैं (पृष्ठ के तल पर) मैन्युअल रूप से फ़ॉर्मेट करने के लिए this way पाया आप wNumb - लाइब्रेरी का उपयोग नहीं करना चाहते हैं, यह विधि काम कर सकती है। यह आपको दशमलव के बिना मूल्य देगा। उम्मीद है कि यह मदद करता है।

value.split('.')[0] 

Answer 3

यह काम कर सकते हैं ..

var sliderFormat = document.getElementById('slider-format'); 

noUiSlider.create(sliderFormat, { 
start: [ 20 ], 
... 
format: { 
    from: function(value) { 
      return parseInt(value); 
     }, 
    to: function(value) { 
      return parseInt(value); 
     } 
    } 
}); 

Answer 4

लगा कि मैं मामले में किसी को एक जवाब और ने इस की तलाश में आता उपलब्ध कराएंगे। सीधे शब्दों में noUiSlider निर्माण के लिए एक विकल्प के रूप निम्नलिखित जोड़ें:

tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ], 

निम्नलिखित कोड स्लाइडर आप noUiSlider टूलटिप कोई दशमलव अंकों के साथ केवल पूर्णांक मान प्रदर्शित करने के साथ की जरूरत पैदा करेगा:

$(document).ready(function() { 
var groesseslider = document.getElementById('slider-tooltip'); 

noUiSlider.create(groesseslider, { 
    start: [ 145 ], 
    step: 1, 
    tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ], 
    range: { 
     'min': 100, 
     'max': 250 
    } 
}); 

Answer 5

हैं आपको नहीं लगता कि आपको कभी भी अपनी साइट पर दशमलव स्थान होने की आवश्यकता होगी, आप toFixed(2) के लिए jquery.nouislider.min.js फ़ाइल खोज सकते हैं और toFixed(0) के साथ प्रतिस्थापित कर सकते हैं।