Increment number input with rules to steps

I’m trying to create number input with counting rules, for example, I want to have first 5 increment steps to be 100 units (100 – 500) and once reaching 500 change increment steps to 500.

So it will be 100, 200, 300, 400, 500, 1000, 1500, 2000...

Here is what I have tried so far, something causes the 500 step attribute trigger only when reaching 600 instead 500.

   $('input#grams_quantity').on( "change", function(){
   console.log('works');
       if($(this).val() > 400){
         $("#grams_quantity").attr('step', 500);
         console.log('500');
       }
    else{
        $("#grams_quantity").attr('step', 100);
        console.log('100');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" step="100" name="grams_quantity" class="grams_quantity" id="grams_quantity" value="100" min="100">

How can I set rules to number input increment steps correctly?

27 thoughts on “Increment number input with rules to steps”

Leave a Comment