Search code examples
formattingdecimalnouislider

decimals=0 nor working between all steps


I have this setup:

                <script>
                    // Behaviour
                    jQuery("#lp-slider").noUiSlider({
                        start: [ 30000 ],
                        connect: "lower",
                        range: {
                            'min': [ 2000,100 ],
                            '20%': [ 20000,1000 ],
                            '40%': [ 30000,2000 ],
                            '60%': [ 50000,2000 ],
                            '80%': [ 70000,3000 ],
                            'max': [ 100000 ]
                        },
                        // Number formatting
                        format: wNumb({
                            decimals: 0
                        })
                    });

                    // Link value to input
                    jQuery("#lp-slider").Link('lower').to(jQuery('#kwh'));
                </script>

I bound it to an input field. It's working good when the first value is 10.000. But when the first value is below 10.000 I get weird decimals after the comma like "13099.99997" even with decimals=0.

How can I make sure that really only 100s are outputted when I set the way like above in the code?

Thanks in advance for any help! getimo


Solution

  • Setting the format option on the slider affects the .val() readout. You can use the same formatter on the .Link(), like so:

    jQuery("#lp-slider").Link('lower').to(jQuery('#kwh'), null, wNumb({
        decimals: 0
    }));
    

    Working jsFiddle.

    Edit in response to comment:

    You've got yourself a tricky bug there! On line 77, you have:

    <script src="/landing/0custom/nouislider/jquery.nouislider.all.min.js"></script><script src="/landing/0custom/nouislider/wNumb.js"></script>
    

    jquery.nouislider.all.min.js already contains wNumb. The wNumb.js you've included is an older version before this bugfix. Remove wNumb.js to resolve your problem.