Press "Enter" to skip to content

A Mobile-Friendly Rotating Slider | Number Picker

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

    Leave a Reply

    Your email address will not be published.