javascriptintegertooltipnouislider

NoUISlider Tooltip only show integers


I want that the tooltip on my slider only shows integers like "130" and not "130.00". I just dont know where i could start.

Here is my code:

$( 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 JS Code: http://jsfiddle.net/miiauwz/66a5ahm0/


Solution

  • Most preferable way (TL;DR):

    manually formatting:

    var sliderFormat = document.getElementById('slider-format');
    
    noUiSlider.create(sliderFormat, {
        start: [ 20 ],
    
        /*...*/
    
        format: {
          to: function ( value ) {
            // format as you like / need:
            return value + ',-'; // or value.toFixed();
          },
          from: function ( value ) {
            // format as you like / need:
            return value.replace(',-', '');
          }
        }
    });
    

    Original complete answer

    You can either try using the unencoded value like described in noUISlider's documentation about 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;
    });
    

    or another possibility would be using the format option on slider creation (but haven't tried it myself yet):

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

    The drawback is you have to download the wNumb-Library separately from here: http://refreshless.com/wnumb/.


    Another way without wNumb

    After having another look at the examples from noUISlider, I found this way for manually formatting (at the bottom of the page):

    var sliderFormat = document.getElementById('slider-format');
    
    noUiSlider.create(sliderFormat, {
        start: [ 20 ],
        ...
    
        format: {
          to: function ( value ) {
            return value + ',-';
          },
          from: function ( value ) {
            return value.replace(',-', '');
          }
        }
    });