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.
Live demo is available here
Production usage example
npm install rotating-slider
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"/>
</div>
<div>
Decimal numbers
<h1 style="width: 50%; margin: auto;" id="rotating-slider2"/>
</div>
</body>
</html>
js
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);});
This project is available under the MIT license.