Mobile-first Number Picker In jQuery - Rotating Slider

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.

<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 number picker.

<div id="example"></div>

3. Initialize the number picker and define the min/max values as follows:

RotatingSlider($("#example"), {
  min: 1, 
  max: 100
})

4. Set the initial 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 using the setChangeCallback function.

RotatingSlider($("#example"), {
  min: 1, 
  max: 100,
  step: 0.5
}, 20.5).setChangeCallback(function (val) {
  console.log(val)
});

---

This awesome jQuery plugin is developed by wasper1. For more Advanced Usages, please check the demo page or visit the official website.