Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ruisoftware/jquery-rssliderlens
UI slider control that magnifies the current value
https://github.com/ruisoftware/jquery-rssliderlens
control input javascript jquery magnifying-glass range slide
Last synced: about 20 hours ago
JSON representation
UI slider control that magnifies the current value
- Host: GitHub
- URL: https://github.com/ruisoftware/jquery-rssliderlens
- Owner: ruisoftware
- License: mit
- Created: 2014-03-08T21:53:20.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2021-02-02T18:58:50.000Z (almost 4 years ago)
- Last Synced: 2025-01-02T18:05:06.797Z (25 days ago)
- Topics: control, input, javascript, jquery, magnifying-glass, range, slide
- Language: JavaScript
- Homepage:
- Size: 775 KB
- Stars: 22
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery-rsSliderLens [](https://travis-ci.org/ruisoftware/jquery-rsSliderLens)
Renders a powerfull input range control.
With minor differences, all browsers render an <input type="range" /> pretty much the same way:
Using this plugin, the same markup is rendered by default as:
or pretty much any style your imagination takes you:
Check out a [demo](https://codepen.io/ruisoftware/pen/mOEeOp).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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](https://www.npmjs.com/):
````bash
npm install jquery.rsSliderLens --save
````
or directly from git:
````javascript
````
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](https://codepen.io/ruisoftware/pen/XNdNZL)).
````html
section {
margin: 1em 3em;
}
p {
margin-top: 3em;
color: #eee;
}
Ruler slider
Fixed ruler slider ranging from -100 to 100 with a step of 5
Content slider
This is the original HTML content
$("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
}
});
````
# License
This project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)
# Bug Reports & Feature Requests
Please use the [issue tracker](https://github.com/ruisoftware/jquery-rsSliderLens/issues) to report any bugs or file feature requests.
# Contributing
Please refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsSliderLens/blob/master/CONTRIBUTING.md) from more information.