1
votes

I'm using materializecss and noUiSlider.
I want to let the user easy choose a range, so i implemented it with noUiSlider. But on some values I always get decimals.

For example:
I want a range from 15 to 55 but if I try to adjust the slider I get: 15 - 55.00000000000001 If I try 54 or 56 i get the correct values.
There a just a few numbers where this behaviour appears, but I don't really know what am I doing wrong.

My code:

var filterAgeSlider = document.getElementById('filter-range-age');
    noUiSlider.create(filterAgeSlider, {
        start: [15, 80],
        step: 1,
        connect: true,
        range: {
            'min': 15,
            'max': 100
        },
        format: wNumb({
            decimals: 0
        })
    });

    filterAgeSlider.noUiSlider.on('update', function (values, handle) {
        $("#filter-slider-age-value").html("Range: " + values[0] + " - " + values[1]);
        $('#min-age').val(values[0]);
        $('#max-age').val(values[1]);
    });  

Html

   <div class="row">
         <div class="input-field col s12">
                 <div id="filter-range-age"></div>
                 <label for="filter-range-age" id="filter-slider-age-value"></label>
                 <input type="hidden" name="min-age">
                 <input type="hidden" name="max-age">
          </div>
   </div>
What versions of noUiSlider and wNumb are you using? - Lg102
nouislider - 9.1.0 wNumb: I don't know, comes bundled with nouislider materialize v0.98.2 This version: github.com/Dogfalo/materialize/blob/master/extras/noUiSlider/… - Ronon
You are probably hitting this (fixed) bug: github.com/leongersen/wnumb/issues/8 - Lg102
I found a solution in the github thread. I had to add an encoder - Ronon