Skip to main content

Quantity Counter

Simple input spinner controls. A common use would be a "quantity" input on an eCommerce site, booking forms.

How to use?

hs.quantity-counter.js resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/components/hs.quantity-counter.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of quantity counter
    var counter = 0;

    $.HSCore.components.HSQantityCounter.init('.js-quantity', {
      stopIncrease: function() {
        if (counter >= 19) return true;
      },
      afterIncrease: function() {
        counter += 1;
      },
      afterDecrease: function() {
        counter -= 1;
      }
    });
  });
</script>
Copy

Basic example

Basic example that highlights today's day.

1 
<!-- Datepicker -->
<div id="datepickerWrapperFrom" class="u-datepicker input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <span class="fas fa-calendar"></span>
    </span>
  </div>
  <input class="js-range-datepicker form-control bg-transparent rounded-right" type="text" placeholder="From" aria-label="From"
         data-rp-wrapper="#datepickerWrapperFrom"
         data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
Copy

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-min-val="".

Attribute Description

data-min-val

 Minimum value when stepping.

data-max-val

 Maximum value when stepping.