Button Mousedown Not Stopping at Break Point

Button Mousedown Not Stopping at Break Point

I'm trying to create a simple spinner plugin and I'm facing an issue.

I'm trying to create a simple spinner plugin and I'm facing an issue.

To reproduce the issue:

  1. Click and hold on the "plus" or "minus" button.
  2. After reaching the max or min, the button will be disabled and you will get a message that you reached the maximum or mininum value.
  3. Now click only once on the other side to increase or decrease the spinner by only one step.
  4. Now click and hold the first button again.
  5. The spinner will pass the max or min by one step and then stop.

What's going wrong?

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var errors = {
        min: "Looks like you are at Min ",
        max: "looks like you are at Max"
      };
      var temp = 0.0;
      var toUp = null;
      var ivUp = null;
      var toDown = null;
      var ivDown = null;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var min = $(this).data('min');
      var max = $(this).data('max');
      var step = $(this).data('step');
      var type = $(this).data('type');
      var maxerr = $(this).data('maxerror');
      var minerr = $(this).data('minerror');

  function MaxStop() {
    if (temp >= max) {
      clearTimeout(toUp);
      clearInterval(ivUp);
      $('.btn-add').prop('disabled', true);
      $('.btn-less').prop('disabled', true);
      dec.prop('disabled', false);
      $('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
    }
  }

  function MinStop() {
    if (temp <= min) {
      clearTimeout(toDown);
      clearInterval(ivDown);
      $('.btn-add').prop('disabled', true);
      $('.btn-less').prop('disabled', true);
      inc.prop('disabled', false);
      $('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
    }
  }

  function MoreUp() {
    temp = temp + step;

    if (temp > 0) {
      out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
    } else {
      out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
    }

    MaxStop();
  }

  function MoreDown() {
    temp = temp - step;
    if (temp > 0) {
      out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
    } else {
      out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
    }


    MinStop();
  }
  inc.on("mousedown", function() {
      $(".btn-less").prop('disabled', false);
      $(".btn-add").prop('disabled', false);
      $('.result').children().addClass('fadeOutDown');
      temp = temp + step;

      if (temp > 0) {
        out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
      } else {
        out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
      }


      toUp = setTimeout(function() {
        ivUp = setInterval(MoreUp, 75);
      }, 500);

    })
    .on("mouseup mouseleave", function() {
      clearTimeout(toUp);
      clearInterval(ivUp);
      MaxStop();
    });


  dec.on("mousedown", function() {
      $(".btn-less").prop('disabled', false);
      $(".btn-add").prop('disabled', false);
      $('.result').children().addClass('fadeOutDown');
      temp = temp - step;

      if (temp > 0) {
        out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
      } else {
        out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
      }
      toDown = setTimeout(function() {
        ivDown = setInterval(MoreDown, 75);
      }, 500);
    })
    .on("mouseup mouseleave", function() {
      clearTimeout(toDown);
      clearInterval(ivDown);
      MinStop();
    });
});

} }(jQuery));

$('.spiner').spiner(); body { padding-top: 10px; }

.btn-prescriptis .btn { border-radius: 0px; max-height: 46px; cursor: pointer; width: 50px; }

.btn-prescriptis .btn-nums { background: #fff !important; color: #555 !important; outline: none !important; box-shadow: none !important; width: 80px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min"> <button type="button" class="btn btn-secondary btn-less">-</button> <button type="button" class="btn btn-secondary btn-nums">0.00</button> <button type="button" class="btn btn-secondary btn-add">+</button> </div>

<div class="container"> <div class="col-12 result"></div> </div>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Understand and Use JavaScript's .forEach() vs. jQuery's .each()

There are two functions to deal with an array on the client-side – JavaScript's .forEach() and jQuery's .each(). Here, I will teach you how to use both of these methods with some sample code.

jQuery vs Vanilla JavaScript - Beau teaches JavaScript

When should you use jQuery instead of vanilla JavaScript? Is jQuery still relevant? What is jQuery good for? jQuery vs vanilla JavaScript - Beau teaches JavaScript

3 JavaScript libraries to replace jQuery

Ubiquitous jQuery has been outmoded by JavaScript and browser advances. Cash, Zepto, and Syncfusion are three JavaScript libraries picking up where jQuery left off