NoUISlider Tooltip sadece tamsayıları göster

Question

Kaydırıcıdaki araç ipucunun yalnızca "130" gibi tam sayıları ve "130.00" değerini göstermesini istemiyorum. Sadece nereden başlayacağımı bilmiyorum.

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

Benim JS Kod: Burada

benim kodudur http://jsfiddle.net/miiauwz/66a5ahm0/

Answer 1

yapabilirsiniz ya noUISlider belgelerine yaklaşık 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; 
}); 

veya başka anlatıldığı gibi unencoded değerini kullanmayı deneyin olasılık format option on slider creation kullanıyor (ama henüz kendim denemedim):

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

dezavantajı burada ayrı wNumb-Library indirmek zorunda olduğunu: 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

I:

bir başka yolu

wNumb olmadan

---

noUISlider örneklerle tekrar göz yaptıktan sonra elle (sayfanın alt kısmında) biçimlendirmek için this way bulundu wNumb - kütüphanesini kullanmak istemezsiniz, bu yöntem işe yarayabilir. Bu, ondalık olmadan değer verecektir. Bu yardımcı olur umarım.

value.split('.')[0] 

Answer 3

Bu çalışabilir ..

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

başka bu seyir için geliyor, bir kişinin bir cevap vermek düşündüm. Basitçe noUiSlider yaratılmasına bir seçenek olarak aşağıdakileri ekleyin:

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

Aşağıdaki kod noUiSlider ipucu hiçbir ondalık puanla tek tamsayı değeri gösteren ile ihtiyaç kaydırıcı oluşturur:

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

ise Sitenizde ondalık basamaklarınızın olması gerektiğini düşünmüyorsanız, toFixed(2) için jquery.nouislider.min.js dosyasını arayabilir ve toFixed(0) ile değiştirin. Yakalanmayan ReferenceError: wNumb tanımlanmamıştır ve kodlanmamış yöntem herhangi bir değişiklik doest: