User Interface Slider Control That Capitalizes To The Current Value | rsSliderLens

rsSliderLens is a plugin for jQuery that converts regular scale input into an advanced, responsive, customizable, scale, ruler/scale input, with magnifying glass effect.

Not only the domain entry, but you can also link the plugin with any element like text, images, etc.

Key Features

  • Works for any markup. Although semantically the <input type="range" /> is the most appropriate markup, and 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 sliders:
    • 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 were used whatsoever;
  • Supports desktop and mobile events.

Read More – jQuery Plugin For A Ripple Effect Inspired by Google Material Design

How to make use of it:

Installation:

npm install jquery.rsSliderLens --save

Usage

<!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>

Advanced Range Slider Control, jquery rsSliderLens Plugin/Github

rsSliderLens-Demo


See Demo And Download

Official Website(ruisoftware): Click Here

This superior jQuery/javascript plugin is developed by ruisoftware. For extra Advanced Usage, please go to the official website.

Share