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 the 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 usage, please go to the official website.

Related Posts

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Lightweight-jQuery-Input-Mask-Plugin

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers

jquery-input-mask-phone-number.js – Simple and easy jquery phone number mask library. JQuery Plugin for masks input field to US phone format. Must Read: jQuery Creates an Input Mask…