NoUISlider Tooltip only show integers

Question

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/

Massarelli

Answer 1

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

Beautify

Thanks but it wont work, i got this error: Uncaught ReferenceError: wNumb is not defined and the the unencoded method doest change anything :/ – Massarelli

@Massarelli did you try to access the unencoded value like this: unencoded[handle] ? – Beautify

I dont know what you mean with "acces" the value, im very new to Javascript, sorry – Massarelli

Thank you!, i downloaded the wnumb library and it works :) – Massarelli

@Massarelli In case you are interested in the other two methods besides using wNumb, here is a jsfiddle using the unencoded value: http://jsfiddle.net/499Lg1bz/8/ and one using the manual from- and to-methods: http://jsfiddle.net/499Lg1bz/11/ – Beautify

Answer 2

This can work..

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

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

Thrave

Thanks! Nice to have a solution that doesn't require an additional dependency, as the library is supposed to be "minimal" – Itemized

The best solution so far – Hypercorrection

Great solution, no need to add wNum or modify the library just to remove decimals. This should be the accepted answer. – Nakasuji

Works like a charm! This is certainly the way to go about it. – Herdic

Answer 3

If you don't think you'll ever need to have decimal places on your site, you can search the jquery.nouislider.min.js file for toFixed(2) and replace with toFixed(0).

Suture

Answer 4

I you don't want to use wNumb - library , this method might work. This will give you value without decimals. Hope this helps.

value.split('.')[0]

Crimson

This doesn't take into account Rounding – Brachycephalic

Answer 5

Possible way without using any other library. If we want to show only integers there is no need to use additional libraries. Assuming that in the html code there is the element 'slider-fee'.

<div id="slider-fee"></div>

Let's say that we want to give the possibility to choose a range of hours in a day. Something like 7h-19h or 8h-20h and in the tooltip we want to display the integer only.

dragTapSlider = document.getElementById('slider-fee');

// number of decimal places 
decimals = 0;

// format object
numberFormat = {
    // 'to' the formatted value. Receives a number.
    to: function (value) {
        return value.toFixed(decimals);
    },
    // 'from' the formatted value.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value);;
    }
};

noUiSlider.create(dragTapSlider, {
    start: [8, 20],
    connect: [false, true, false], 
    step: 1,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 1,
        'max': 24
    },
    format: numberFormat
});

noUiSlider - Integer Format

Example for money range

dragTapSlider = document.getElementById('slider-fee');

decimals = 2;
suffix = '€';

numberFormat = {
    // 'to' Format the value to currency.
    to: function (value) {
        return value.toFixed(decimals) + ' ' + suffix;
    },
    // 'from' Convert currency value to number.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value.replace(' ' + suffix));
    }
};

noUiSlider.create(dragTapSlider, {

    start: [25, 40],
    connect: [false, true, false],
    step: 0.5,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 20,
        'max': 50
    },
    format: numberFormat
});

noUiSlider - Currency Format

Cherin

add some description to your answer so that it is more understandable and the user gets an idea what the code is doing – Centonze

Answer 6

Figured I'd provide an answer in case someone else comes looking for this. Simply add the following as an option to the noUiSlider creation:

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

The following code will create the slider you need with the noUiSlider tooltip displaying only the integer value with no decimal points:

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

Stamford

Answer 7

var skipSlider = document.getElementById('price');

noUiSlider.create(skipSlider, {
    start: [47000, 247000],
    connect: true,
    behaviour: 'drag',
    step: 1,
    range: {
      'min': [47000],
      'max': [247000]
    },
});

var skipValues = [
    document.getElementById('min-price'),
    document.getElementById('max-price')
];

skipSlider.noUiSlider.on('update', function (values, handle, unencoded) {
    skipValues[handle].innerHTML = unencoded[handle];
});

Roxanaroxane

Please explain your answer. – Sandblast

ordinary thing is a step and a handle – Roxanaroxane

Answer 8

Just use Math for this instead of the library.

Math.round(value)

Lucho

value is not defined. – Fionafionna

Answer 9

React example with no external library:

<Nouislider
    range={{ min: 0, max: 5 }}
    tooltips={true}
    step={1}
    start={[0, 5]}
    connect
    format={{
      from: (value) => {
        return parseInt(value);
      },
      to: (value) => {
        return parseInt(value);
      }
    }}
    onSlide={onUpdate}
/>

Scare