La descrizione di NoUISlider mostra solo numeri interi

Question

Voglio che il suggerimento sul mio cursore mostri solo numeri interi come "130" e non "130.00". Solo non so dove potrei iniziare.

Ecco il mio codice:

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

My Code JS: http://jsfiddle.net/miiauwz/66a5ahm0/

Answer 1

Si può provare a utilizzare il valore unencoded come descritto nella documentazione del noUISlider circa 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; 
}); 

o di un altro possibilità sarebbe utilizzare il format option on slider creation (ma non ho ancora provato da solo):

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

Lo svantaggio è che devi scaricare il wNumb-Library separatamente da qui: http://refreshless.com/wnumb/.

---

Un altro modo senza wNumb

Dopo avere un altro un'occhiata agli esempi da noUISlider, ho trovato this way per la formattazione manualmente (in fondo alla pagina):

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 non vuoi usare wNumb - library, questo metodo potrebbe funzionare. Questo ti darà un valore senza decimali. Spero che questo aiuti.

value.split('.')[0] 

Answer 3

Questo può funzionare ..

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

Ho pensato di dare una risposta nel caso in cui qualcun altro arriva alla ricerca di questo. Basta aggiungere il seguente come opzione per la creazione noUiSlider:

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

Il seguente codice creerà il cursore è necessario con la tooltip noUiSlider visualizzando solo il valore intero senza punti decimali:

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

Se non pensi che avrai mai bisogno di avere posizioni decimali sul tuo sito, puoi cercare il file jquery.nouislider.min.js per toFixed(2) e sostituirlo con toFixed(0).