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-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                $(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;

Basic example

Basic example that highlights today's day.

              <!-- 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>
                <input class="js-range-datepicker form-control bg-transparent rounded-right" type="text" placeholder="From" aria-label="From"
              <!-- End Datepicker -->

JavaScript behavior


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


Minimum value when stepping.


Maximum value when stepping.