rotating-slider

    1.0.1 • Public • Published

    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"/>
        </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);});
    
    

    License

    This project is available under the MIT license.

    Install

    npm i rotating-slider

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • wasper1