Home > front end >  jquery number spinner not working with float numbers
jquery number spinner not working with float numbers

Time:09-23

I have this JQUERY nice number spinner, but it's not stepping in floats when I give write to go by .01 digits at a time. here is the code: jquery in the head:

 <link rel="stylesheet" href="js/jquery.nice-number.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
  <script src="js/jquery.nice-number.js"></script>

the input and the nice number script:

<input type="number" value="1.0" name="qty" step="0.1" max="99999" min="0.1">
    <script>

        $(function () {

            $('input[type="number"]').niceNumber();

        });

    </script>

how can I solve? Thanks

CodePudding user response:

Assuming this is from: https://github.com/joshua-s/jquery.nice-number

A quick look at the source shows:

var newValue = currentValue   1;

so the nice-number plugin is hardcoded to only add/subtract 1/-1

It does provide a callback, so you could edit the value, but might be better to edit the nice-number.js to pass in the increment step via settings.

$(function() {

  $('input[type="number"]').niceNumber({
    onDecrement: ($el, newValue, settings) => {
      $el.val(Math.round((newValue   0.9) * 100) / 100);
      console.log($el.val())
    },
    onIncrement: ($el, newValue, settings) => {
      //console.log($el.val())
      $el.val(Math.round((newValue - 0.9) * 100) / 100);
      console.log($el.val())
    }
  });

});
<!--<link rel="stylesheet" href="js/jquery.nice-number.css">-->
<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.nice-number.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!--<script src="js/jquery.nice-number.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.nice-number.js"></script>


<input type="number" value="1.0" name="qty" step="0.1" max="99999" min="0.1" style='width:200px;'>

  • Related