{"id":24708766,"url":"https://github.com/ruisoftware/jquery-rssliderlens","last_synced_at":"2025-06-27T23:38:52.161Z","repository":{"id":14829096,"uuid":"17551877","full_name":"ruisoftware/jquery-rsSliderLens","owner":"ruisoftware","description":"UI slider control that magnifies the current value","archived":false,"fork":false,"pushed_at":"2021-02-02T18:58:50.000Z","size":794,"stargazers_count":22,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-02T18:05:06.797Z","etag":null,"topics":["control","input","javascript","jquery","magnifying-glass","range","slide"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruisoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-08T21:53:20.000Z","updated_at":"2023-10-24T01:06:37.000Z","dependencies_parsed_at":"2022-09-26T20:20:37.214Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsSliderLens","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSliderLens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSliderLens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSliderLens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSliderLens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsSliderLens/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235813537,"owners_count":19048987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control","input","javascript","jquery","magnifying-glass","range","slide"],"created_at":"2025-01-27T06:47:27.323Z","updated_at":"2025-01-27T06:47:27.893Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-rsSliderLens [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsSliderLens.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsSliderLens)\nRenders a powerfull input range control.\u003cbr\u003e\n\nWith minor differences, all browsers render an \u003ccode\u003e\u0026lt;input type=\"range\" /\u0026gt;\u003c/code\u003e pretty much the same way:  \n![default](https://cloud.githubusercontent.com/assets/428736/20031930/0c3e0f5c-a391-11e6-923f-c080e0fbe0e9.png)\n\nUsing this plugin, the same markup is rendered by default as:  \n![sample1](https://cloud.githubusercontent.com/assets/428736/20031939/2a682e2c-a391-11e6-961d-47d5f3a95969.png)\n\nor pretty much any style your imagination takes you:  \n![sample2](https://cloud.githubusercontent.com/assets/428736/20301845/1cf9c8c0-ab36-11e6-9cf4-7f80a53b94c1.png)\n\nCheck out a [demo](https://codepen.io/ruisoftware/pen/mOEeOp).\nAlso available at `src/demo/demo.html`\n\n# Key Features\n - Works for any markup. Although semantically the \u003ccode\u003e\u0026lt;input type=\"range\" /\u0026gt;\u003c/code\u003e is the most appropriate markup, any other element can be used.\n - Keyboard and mouse navigation. For a markup other than \u003ccode\u003e\u0026lt;input type=\"range\" /\u0026gt;\u003c/code\u003e to be focusable, it has to have a \u003ccode\u003e[tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\u003c/code\u003e attribute;\n - Two types of slider:\n    - Sliding type: The handle can move along the slide rail;\n    - Fixed type: The handle remains in a fixed position, while the slide rail moves underneath;\n - When using the sliding type, two handles can be utilized to select ranges;\n - If desired, it can display magnified content inside the handle(s);\n - Supports both horizontal and vertical orientations;\n - Supports left to right and top to bottom directions. These directions can be reversed;\n - Either renders a rule or the markup's original content;\n - Highly customizable:\n    - LESS file used to generate CSS in the color layout you wish;\n    - Responsive design, through the use of relative CSS units;\n    - Strong event driven support;\n    - Slider content can be overridden or rewritten from scratch;\n - Fast loading. No images used whatsoever;\n - Supports desktop and mobile events.\n \n# Installation\n\nYou can install from [npm](https://www.npmjs.com/):\n````bash\nnpm install jquery.rsSliderLens --save\n````\nor directly from git:\n````javascript\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsSliderLens/master/src/jquery.rsSliderLens.js\"\u003e\u003c/script\u003e\n````\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsSliderLens.js` from your local machine.\n\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\n\n# Usage\n\nFirst, 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.\u003cbr\u003e\n\nCreate the following file in the `src` folder (or you can try it [live here](https://codepen.io/ruisoftware/pen/XNdNZL)).\n\n````html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"../dist/rsSliderLens.css\" /\u003e\n    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../dist/jquery.rsSliderLens.min.js\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n        section {\n            margin: 1em 3em;\n        }\n        p {\n            margin-top: 3em;\n            color: #eee;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003csection\u003e\n        \u003cp\u003eRuler slider\u003c/p\u003e\n        \u003cinput type=\"range\"\u003e\n\n        \u003cp\u003eFixed ruler slider ranging from -100 to 100 with a step of 5\u003c/p\u003e\n        \u003cinput type=\"range\" min=\"-100\" max=\"100\" step=\"5\"\u003e\n\n        \u003cp\u003eContent slider\u003c/p\u003e\n        \u003cspan\u003eThis is the original HTML content\u003c/span\u003e\n    \u003c/section\u003e\n\n    \u003cscript\u003e\n        $(\"input[type=range]\").eq(0).rsSliderLens();\n\n        $(\"input[type=range]\").eq(1).rsSliderLens({\n            paddingStart: .1,\n            paddingEnd: .1,\n            fixedHandle: true,\n            ruler: {\n                size: 6 // 600% of the slider width\n            }\n        });\n\n        $(\"span\").rsSliderLens({\n            ruler: {\n                visible: false // hide the ruler, show the html content\n            }\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n````\n# License\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\n\n# Bug Reports \u0026 Feature Requests\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsSliderLens/issues) to report any bugs or file feature requests.\n\n# Contributing\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsSliderLens/blob/master/CONTRIBUTING.md) from more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rssliderlens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rssliderlens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rssliderlens/lists"}