jquery.rsSliderLens
Advanced tools
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.
Also available at src/demo/demo.html
<input type="range" /> is the most appropriate markup, any other element can be used.<input type="range" /> to be focusable, it has to have a tabindex attribute;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.
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>
This project is licensed under the terms of the MIT license
Please use the issue tracker to report any bugs or file feature requests.
Please refer to the Contribution page from more information.
FAQs
UI range slider control that magnifies the current value
The npm package jquery.rsSliderLens receives a total of 3 weekly downloads. As such, jquery.rsSliderLens popularity was classified as not popular.
We found that jquery.rsSliderLens demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.