Quantity Controller jQuery Plugin qController

qController Example

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.

Why qController

The qController let's developers to handle user's small inputs (quantities) and perform various kinds of things according to the user input. You can easily implement this lightweight Plugin in your projects. The qController also can be used in functions, conditions, loops, arrays, dynamic & static contents of the javascript programs.

Sometimes, user needs to input a little bit number while performing some kind of task on a website/app. (i.e selecting quantity of item in shopping website, quantity for level of something, quantity of font size, zooming level, increasing or decreasing number, in short to do something after selecting specific quantity).
This lightweight plugin will helps you to handle such kinds of inputs more easily.

What's qController Offer

Basically, this plugin control quantity of something. However, it can be used for various purposes according to its available options. There are five total options, these are:

  qStart: 50, //quantity where from start to increase or decrease 
  qMax: 100, //quantity maximum limit to increase
  qMin: 1, // quantity to minimum limit to decrease
  qSlider: true, //also show input range slider for increasing or decreasing along with plus and minus buttons
  qStatus: "Quantity: ", //text that will show along with the quantity status

How to Implement

First, create a container (an empty div element) in HTML where you want to adjust this controller. After this, initialize it with that container's id or class name in DOM ready function.

$(document).ready(function(){
$(".classname").qController({
     //options goes here 
   });
 });

Note: Use the above mentioned options to get the desired input from the user.

Working with User's Inputs

You can do something when its value reached to the specific number, maximum or minimum with the following condition.

if ( Quantity == setting.qMax){
     // block of code
}

Note: Use setting.qMin for minimum value.
You can use your desired condition.
Add the conditions, loops and arrays in structure of this plugin.

In plugin code structure, var Quantity stores all the values. It has global scope in plugin. You can use this variable to handle user inputs.
To store it's specific value in another array, use the push method.