Geek Answers Handbook

NoUISlider tooltip shows only integers

I want the tooltip on my slider to show only integers such as "130" and not "130.00". I just don’t know where I can 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/

+7
source share
7 answers

You can either try using the unencoded value as described in the noUISlider documentation on 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 uses the format parameter when creating the slider (but I have not 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 downside is that you have to download the wNb library separately from here: http://refreshless.com/wnumb/ .

Another way without wNumb

After reviewing the examples from noUISlider again, I found this way for manual 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(',-', ''); } } });
+13
source

It might 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); } } });
+14
source

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

+3
source

I do not want to use the wNumb library, this method may work. This will give you a value without decimals. Hope this helps.

 value.split('.')[0]
+1
source

It is clear that I would provide an answer if someone else is looking for it. Just add the following as an option to create noUiSlider:

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

The following code will create a slider for you using the noUiSlider tooltip, which displays only an integer value without 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 } });
0
source

Verified)

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

Just use Math for this instead of a library.

 Math.round(value)
0
source

More articles:


All Articles