Rotating Slider to choose numerical values and allows accurate mobile-friendly identification of value from a specified range with the required step. The component is especially useful for a hybrid application that uses frameworks like Ionic, Cordova, or PhoneGap.
How to make use of it:
1. Insert jQuery library and the Rotating Slider plugin’s information within the HTML.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/rotating-slider.js"></script> <link rel="stylesheet" href="/path/to/rotating-slider.css" />
2. Create an empty container to hold the quantity picker.
<div id="example"></div>
3. Initialize the quantity picker and outline the min/max values as follows:
RotatingSlider($("#example"), { min: 1, max: 100 })
4. Set the preliminary value.
RotatingSlider($("#example"), { min: 1, max: 100 }, 20)
5. Specify the interval (step size) between numbers.
RotatingSlider($("#example"), { min: 1, max: 100, step: 0.5 }, 20.5)
6. Get the picked value utilizing the setChangeCallback
function.
RotatingSlider($("#example"), { min: 1, max: 100, step: 0.5 }, 20.5).setChangeCallback(function (val) { console.log(val) });
Mobile-first Number Picker, Rotating Slider Plugin/Github
See Demo And Download
Official Website(wasper1): Click Here
This superior jQuery/javascript plugin is developed by wasper1. For extra Advanced Usages, please go to the official website.
Be First to Comment