jquery-rsSliderLens

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="https://github.com/ruisoftware/jquery-rsSliderLens/blob/master/./dist/rsSliderLens.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://github.com/ruisoftware/jquery-rsSliderLens/raw/master/./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.

ruisoftware / jquery-rsSliderLens

readme