{"id":19856892,"url":"https://github.com/n3r4zzurr0/react-range-slider-input","last_synced_at":"2025-04-05T01:05:15.379Z","repository":{"id":38520213,"uuid":"488302697","full_name":"n3r4zzurr0/react-range-slider-input","owner":"n3r4zzurr0","description":"React component wrapper for range-slider-input","archived":false,"fork":false,"pushed_at":"2025-02-08T21:44:29.000Z","size":791,"stargazers_count":51,"open_issues_count":3,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T00:07:33.924Z","etag":null,"topics":["range-slider","react","react-component"],"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/n3r4zzurr0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-03T17:28:48.000Z","updated_at":"2025-03-26T11:27:56.000Z","dependencies_parsed_at":"2024-06-18T16:46:44.255Z","dependency_job_id":"d41870e0-2140-4967-b611-74e8e71f43fa","html_url":"https://github.com/n3r4zzurr0/react-range-slider-input","commit_stats":{"total_commits":44,"total_committers":1,"mean_commits":44.0,"dds":0.0,"last_synced_commit":"1c979e7d975be367693e88de248e9ea7870fe358"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n3r4zzurr0%2Freact-range-slider-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n3r4zzurr0%2Freact-range-slider-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n3r4zzurr0%2Freact-range-slider-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n3r4zzurr0%2Freact-range-slider-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n3r4zzurr0","download_url":"https://codeload.github.com/n3r4zzurr0/react-range-slider-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271518,"owners_count":20911587,"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":["range-slider","react","react-component"],"created_at":"2024-11-12T14:16:56.058Z","updated_at":"2025-04-05T01:05:15.356Z","avatar_url":"https://github.com/n3r4zzurr0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[circleci-image]: https://circleci.com/gh/n3r4zzurr0/react-range-slider-input.svg?style=shield\n[circleci-url]: https://circleci.com/gh/n3r4zzurr0/react-range-slider-input\n[npm-image]: https://img.shields.io/npm/v/react-range-slider-input.svg\n[npm-url]: https://npmjs.org/package/react-range-slider-input\n[vulnerabilities-image]: https://snyk.io/test/npm/react-range-slider-input/badge.svg\n[vulnerabilities-url]: https://snyk.io/test/npm/react-range-slider-input\n[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standard-url]: https://standardjs.com\n[license-image]: https://img.shields.io/github/license/n3r4zzurr0/range-slider-input.svg\n[license-url]: https://github.com/n3r4zzurr0/range-slider-input/blob/main/LICENSE\n\n# react-range-slider-input\n[![circleci][circleci-image]][circleci-url] [![npm][npm-image]][npm-url] [![known vulnerabilities][vulnerabilities-image]][vulnerabilities-url] [![javascript style guide][standard-image]][standard-url] [![license][license-image]][license-url]\n\nReact component wrapper for [range-slider-input](https://github.com/n3r4zzurr0/range-slider-input) (a lightweight [~2kB] library to create range sliders that can capture a value or a range of values with one or two drag handles).\n\n**[CodeSanbox Demo](https://codesandbox.io/s/react-range-slider-input-demo-ymw2kp?file=/src/App.js)**\n\n[![Demo](https://n3r4zzurr0.in/static/rsi-demo600.gif)](https://n3r4zzurr0.in/range-slider-input/)\n\n\n\u003cbr\u003e\n\n## Installation\n```\nnpm install react-range-slider-input\n```\n\n## Usage\n\n**v3.0.x and above (recommended)**\n```js\nimport RangeSlider from 'react-range-slider-input';\nimport 'react-range-slider-input/dist/style.css';\n\nexport default function () {\n    return (\n        \u003cRangeSlider /\u003e\n    );\n}\n```\n**v2.1.x and below**\n```js\nimport RangeSlider from 'react-range-slider-input';\n\nexport default function () {\n    return (\n        \u003cRangeSlider /\u003e\n    );\n}\n```\n\n## Props\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003cth\u003eProperty\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDefault value\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eid\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003enull\u003c/td\u003e\n    \u003ctd\u003eIdentifier string (\u003ccode\u003eid\u003c/code\u003e attribute value) to be passed to the range slider element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eclassName\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003enull\u003c/td\u003e\n    \u003ctd\u003eString of classes to be passed to the range slider element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emin\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber\u003c/td\u003e\n    \u003ctd\u003e0\u003c/td\u003e\n    \u003ctd\u003eNumber that specifies the lowest value in the range of permitted values.\u003cbr\u003eIts value must be less than that of \u003ccode\u003emax\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emax\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber\u003c/td\u003e\n    \u003ctd\u003e100\u003c/td\u003e\n    \u003ctd\u003eNumber that specifies the greatest value in the range of permitted values.\u003cbr\u003eIts value must be greater than that of \u003ccode\u003emin\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003estep\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber / string\u003c/td\u003e\n    \u003ctd\u003e1\u003c/td\u003e\n    \u003ctd\u003eNumber that specifies the amount by which the slider value(s) will change upon user interaction.\u003cbr\u003eOther than numbers, the value of \u003ccode\u003estep\u003c/code\u003e can be a string value of \u003ccode\u003eany\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003eFrom \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\"\u003eMDN\u003c/a\u003e,\u003cblockquote\u003e A string value of \u003ccode\u003eany\u003c/code\u003e means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).\u003c/blockquote\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003edefaultValue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber[]\u003c/td\u003e\n    \u003ctd\u003e[25, 75]\u003c/td\u003e\n    \u003ctd\u003eArray of two numbers that specify the default values of the lower and upper offsets of the range slider element respectively. \u003cb\u003eIf set, the range slider will be rendered as an uncontrolled element. To render it as a controlled element, set the \u003ccode\u003evalue\u003c/code\u003e property.\u003c/b\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003evalue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber[]\u003c/td\u003e\n    \u003ctd\u003e[]\u003c/td\u003e\n    \u003ctd\u003eArray of two numbers that specify the values of the lower and upper offsets of the range slider element respectively. \u003cb\u003eIf set, the range slider will be rendered as a controlled element.\u003c/b\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonInput\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eNOOP\u003c/td\u003e\n    \u003ctd\u003eFunction to be called when there is a change in the value(s) of range sliders upon user interaction.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonThumbDragStart\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eNOOP\u003c/td\u003e\n    \u003ctd\u003eFunction to be called when the \u003ccode\u003epointerdown\u003c/code\u003e event is triggered for any of the thumbs.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonThumbDragEnd\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eNOOP\u003c/td\u003e\n    \u003ctd\u003eFunction to be called when the \u003ccode\u003epointerup\u003c/code\u003e event is triggered for any of the thumbs.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonRangeDragStart\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eNOOP\u003c/td\u003e\n    \u003ctd\u003eFunction to be called when the \u003ccode\u003epointerdown\u003c/code\u003e event is triggered for the range.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eonRangeDragEnd\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003efunction\u003c/td\u003e\n    \u003ctd\u003eNOOP\u003c/td\u003e\n    \u003ctd\u003eFunction to be called when the \u003ccode\u003epointerup\u003c/code\u003e event is triggered for the range.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003edisabled\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003eBoolean that specifies if the range slider element is disabled or not.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003erangeSlideDisabled\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003eBoolean that specifies if the range is slidable or not.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ethumbsDisabled\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eboolean[]\u003c/td\u003e\n    \u003ctd\u003e[false, false]\u003c/td\u003e\n    \u003ctd\u003eArray of two Booleans which specify if the lower and upper thumbs are disabled or not, respectively. If only one Boolean value is passed instead of an array, the value will apply to both thumbs.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eorientation\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003ehorizontal\u003c/td\u003e\n    \u003ctd\u003eString that specifies the axis along which the user interaction is to be registered. By default, the range slider element registers the user interaction along the X-axis. It takes two different values: \u003ccode\u003ehorizontal\u003c/code\u003e and \u003ccode\u003evertical\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eariaLabel\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring[]\u003c/td\u003e\n    \u003ctd\u003e-\u003c/td\u003e\n    \u003ctd\u003eArray of two strings that set the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\"\u003e\u003ccode\u003earia-label\u003c/code\u003e\u003c/a\u003e attribute on the lower and upper thumbs respectively.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eariaLabelledBy\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003estring[]\u003c/td\u003e\n    \u003ctd\u003e-\u003c/td\u003e\n    \u003ctd\u003eArray of two strings that set the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\"\u003e\u003ccode\u003earia-labelledby\u003c/code\u003e\u003c/a\u003e attribute on the lower and upper thumbs respectively.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Elements\n\nRefer to [range-slider-input's Elements section](https://github.com/n3r4zzurr0/range-slider-input#elements)\n\n\n## Styling\n\nRefer to [range-slider-input's Styling section](https://github.com/n3r4zzurr0/range-slider-input#styling)\n\n\n## License\n\nMIT © [Utkarsh Verma](https://github.com/n3r4zzurr0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn3r4zzurr0%2Freact-range-slider-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn3r4zzurr0%2Freact-range-slider-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn3r4zzurr0%2Freact-range-slider-input/lists"}