rotating-slider

Rotating slider for selecting numerical values.
Allows mobile friendly precise selection for value from selected range with desired step.
Component is especially useful for hybrid application using frameworks like Ionic, Cordova or PhoneGap.

Demo

Live demo is available here

Production usage example

Install

npm install rotating-slider

Usage

HTML

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://wasper1.github.io/rotating-slider/src/rotating-slider.css">
</head>
<body>
    <div>
        Integers
        <h1 id="rotating-slider1"></h1>
    </div>
    <div>
        Decimal numbers
        <h1 style="width: 50%; margin: auto;" id="rotating-slider2"></h1>
    </div>
</body>
</html>

import RotatingSlider from 'rotating-slider';
RotatingSlider("#rotating-slider1", {min: 1, max: 100, step: 1}, 10)
    .setChangeCallback(val => {console.log(val);});
RotatingSlider("#rotating-slider1", {min: 1, max: 5, step: 0.5}, 3.5)
    .setChangeCallback(val => {console.log(val);});

License

This project is available under the MIT license.