jQuery Quantity Controller Plugin – qController

File Size: 3.2 KB
Views Total: 852 views
Last Update:October 13, 2018
Publish Date: October 13, 2018
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Quantity Controller Plugin with qController. users can change value in input number or quantity of something by buttons or range slider.

Main Features

  • Fully Configurable, Adjustable and Customizable.
  • Two ways for user input (plus minus button and range slider for quickly input). (Slider is Optional)
  • Provide way to handle Minimum and Maximum Quantity.
  • Automatically Creates UI Elements, However Provide Classes for Fully Customization with CSS.
  • Provide easy way to handle user quantity inputs.

How to use this plugin:

 Add jQuery from library and the Quantity Controller plugin’s files:

<link href="css/qcontroller.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.qcontroller.js"></script>

Call the function to convert the container element.

<div class="example"></div>



Into a quantity controller:

<div class="quantity">
  <button class="minus">-</button>
    <em class="q-status">100</em>
  <button class="plus">+</button>

<input type="range" value="54" min="1" max="100" class="qslider">

 Set the min/max/start values of the quantity controller:

  qStart: 50,
  qMax: 100, 
  qMin: 1

Decide whether to show the range slider (Default: true).

  q<a href="https://www.jquerypost.com/tag/slider/">Slider</a>: false

Set the text that will show along with the quantity status.

  qStatus: "Quantity: "


Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like