This time I will share jQuery Plugin and tutorial about Minimal Numeric Stepper Plugin – jQuery Quantity Controller, hope it will help you in programming stack.
Quantity Controller is a lightweight jQuery plugin to create a numeric stepper (aka. number spinner, input spinner) on the webpage.
The Quantity Controller enables the user to quickly and easily to increment/decrement input with +/- buttons and/or a range slider.
How to use it:
1. Link to jQuery JavaScript library and the Quantity Controller plugin’s files:
1 |
<link href="css/qcontroller.css" rel="stylesheet"> |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"></script> |
5 |
<script src="js/jquery.qcontroller.js"></script> |
2. Call the function to convert the container element…
1 |
<div class="example"></div> |
1 |
$(document).ready(function(){ |
3 |
$(".example").qController(); |
3. Into a quantity controller:
3 |
<button class="minus">-</button> |
4 |
<em class="q-status">100</em> |
5 |
<button class="plus">+</button> |
8 |
<input type="range" value="54" min="1" max="100" class="qslider"> |
4. Set the min/max/start values of the quantity controller:
1 |
$(".example").qController({ |
5. Decide whether to show the range slider (Default: true).
1 |
$(".example").qController({ |
6. Set the text that will show along with the quantity status.
1 |
$(".example").qController({ |
This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.
