CODEWITHSUNDEEP
javascriptintegertooltipnouislider
Juloius
Juloius

Reputation: 263

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/

Upvotes: 12

Views: 21177

Answers (9)

SaSchu
SaSchu

Reputation: 513

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

Upvotes: 18

Erkin Djindjiev
Erkin Djindjiev

Reputation: 577

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}
/>

Upvotes: 0

rcostapr
rcostapr

Reputation: 11

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

Upvotes: 1

Ilhom
Ilhom

Reputation: 1





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

Upvotes: 0

chris_r
chris_r

Reputation: 2147

Just use Math for this instead of the library.

Math.round(value)

Upvotes: 0

Bill_VA
Bill_VA

Reputation: 973

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).

Upvotes: 3

Omar Rida
Omar Rida

Reputation: 133

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

Upvotes: 0

user2540197
user2540197

Reputation: 291

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

Upvotes: 29

achharsh
achharsh

Reputation: 19

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]

Upvotes: 1

Related Questions