jquery.rsSliderLens

    1.0.6 • Public • Published

    jquery-rsSliderLens Build Status

    Renders a powerfull input range control.

    With minor differences, all browsers render an <input type="range" /> pretty much the same way:
    default

    Using this plugin, the same markup is rendered by default as:
    sample1

    or pretty much any style your imagination takes you:
    sample2

    Check out a demo. Also available at src/demo/demo.html

    Key Features

    • Works for any markup. Although semantically the <input type="range" /> is the most appropriate markup, any other element can be used.
    • Keyboard and mouse navigation. For a markup other than <input type="range" /> to be focusable, it has to have a tabindex attribute;
    • Two types of slider:
      • Sliding type: The handle can move along the slide rail;
      • Fixed type: The handle remains in a fixed position, while the slide rail moves underneath;
    • When using the sliding type, two handles can be utilized to select ranges;
    • If desired, it can display magnified content inside the handle(s);
    • Supports both horizontal and vertical orientations;
    • Supports left to right and top to bottom directions. These directions can be reversed;
    • Either renders a rule or the markup's original content;
    • Highly customizable:
      • LESS file used to generate CSS in the color layout you wish;
      • Responsive design, through the use of relative CSS units;
      • Strong event driven support;
      • Slider content can be overridden or rewritten from scratch;
    • Fast loading. No images used whatsoever;
    • Supports desktop and mobile events.

    Installation

    You can install from npm:

    npm install jquery.rsSliderLens --save

    or directly from git:

    <script src="http://rawgit.com/ruisoftware/jquery-rsSliderLens/master/src/jquery.rsSliderLens.js"></script>

    or you can download the Zip archive from github, clone or fork this repository and include jquery.rsSliderLens.js from your local machine.

    You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.

    Usage

    First, you must run grunt. Grunt among other tasks, compiles LESS file into CSS, minimizes the js file and places all production files inside a new dist folder.

    Create the following file in the src folder (or you can try it live here).

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="../dist/rsSliderLens.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="../dist/jquery.rsSliderLens.min.js"></script>
        <style>
            section {
                margin: 1em 3em;
            }
            p {
                margin-top: 3em;
                color: #eee;
            }
        </style>
    </head>
    <body>
        <section>
            <p>Ruler slider</p>
            <input type="range">
    
            <p>Fixed ruler slider ranging from -100 to 100 with a step of 5</p>
            <input type="range" min="-100" max="100" step="5">
    
            <p>Content slider</p>
            <span>This is the original HTML content</span>
        </section>
    
        <script>
            $("input[type=range]").eq(0).rsSliderLens();
    
            $("input[type=range]").eq(1).rsSliderLens({
                paddingStart: .1,
                paddingEnd: .1,
                fixedHandle: true,
                ruler: {
                    size: 6 // 600% of the slider width
                }
            });
    
            $("span").rsSliderLens({
                ruler: {
                    visible: false // hide the ruler, show the html content
                }
            });
        </script>
    </body>
    </html>

    License

    This project is licensed under the terms of the MIT license

    Bug Reports & Feature Requests

    Please use the issue tracker to report any bugs or file feature requests.

    Contributing

    Please refer to the Contribution page from more information.

    Install

    npm i jquery.rsSliderLens

    DownloadsWeekly Downloads

    21

    Version

    1.0.6

    License

    none

    Unpacked Size

    1.09 MB

    Total Files

    42

    Last publish

    Collaborators

    • ruisoftware