This time I will share jQuery Plugin and tutorial about Mobile-first Number Picker In jQuery – Rotating Slider, hope it will help you in programming stack.
A really simple and cross-platform jQuery number picker where you can pick a numeric value within a range by simply swiping left and right just like a rotating slider.
In addition, you can directly type the desired value by clicking/tapping anywhere on the number picker.
How to use it:
1. Insert jQuery library and the Rotating Slider plugin’s files in the HTML.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/rotating-slider.js"></script> |
3 |
<link rel="stylesheet" href="/path/to/rotating-slider.css" /> |
2. Create an empty container to hold the number picker.
1 |
<div id="example"></div> |
3. Initialize the number picker and define the min/max values as follows:
1 |
RotatingSlider($("#example"), { |
4. Set the initial value.
1 |
RotatingSlider($("#example"), { |
5. Specify the interval (step size) between numbers.
1 |
RotatingSlider($("#example"), { |
6. Get the picked value using the setChangeCallback function.
1 |
RotatingSlider($("#example"), { |
5 |
}, 20.5).setChangeCallback(function (val) { |
