{"id":13437159,"url":"https://github.com/react-component/slider","last_synced_at":"2025-05-12T05:29:37.771Z","repository":{"id":30641904,"uuid":"34197461","full_name":"react-component/slider","owner":"react-component","description":"React Slider","archived":false,"fork":false,"pushed_at":"2025-03-26T07:06:36.000Z","size":16631,"stargazers_count":3076,"open_issues_count":278,"forks_count":786,"subscribers_count":46,"default_branch":"master","last_synced_at":"2025-05-12T02:44:51.843Z","etag":null,"topics":["antd","react","react-components"],"latest_commit_sha":null,"homepage":"https://slider.react-component.now.sh/","language":"TypeScript","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/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ant-design","patreon":null,"open_collective":"ant-design","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2015-04-19T07:30:44.000Z","updated_at":"2025-05-09T08:28:55.000Z","dependencies_parsed_at":"2023-01-14T17:23:12.196Z","dependency_job_id":"d2246b60-0126-4823-bddb-38bd9ba2220c","html_url":"https://github.com/react-component/slider","commit_stats":{"total_commits":655,"total_committers":121,"mean_commits":5.413223140495868,"dds":0.7648854961832061,"last_synced_commit":"7853d7f4fa0500a2192bb6eb0bd17716b66efc67"},"previous_names":[],"tags_count":190,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253672707,"owners_count":21945481,"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":["antd","react","react-components"],"created_at":"2024-07-31T03:00:54.725Z","updated_at":"2025-05-12T05:29:37.749Z","avatar_url":"https://github.com/react-component.png","language":"TypeScript","readme":"# rc-slider\n\nSlider UI component for React\n\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n[![build status][github-actions-image]][github-actions-url]\n[![Codecov][codecov-image]][codecov-url]\n[![bundle size][bundlephobia-image]][bundlephobia-url]\n[![dumi][dumi-image]][dumi-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-slider\n[travis-image]: https://img.shields.io/travis/react-component/slider/master?style=flat-square\n[travis-url]: https://travis-ci.com/react-component/slider\n[github-actions-image]: https://github.com/react-component/slider/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/react-component/slider/actions\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/slider/master.svg?style=flat-square\n[codecov-url]: https://app.codecov.io/gh/react-component/slider\n[david-url]: https://david-dm.org/react-component/slider\n[david-image]: https://david-dm.org/react-component/slider/status.svg?style=flat-square\n[david-dev-url]: https://david-dm.org/react-component/slider?type=dev\n[david-dev-image]: https://david-dm.org/react-component/slider/dev-status.svg?style=flat-square\n[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-slider\n[bundlephobia-url]: https://bundlephobia.com/package/rc-slider\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-slider\n[dumi-url]: https://github.com/umijs/dumi\n[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square\n## Install\n\n[![rc-slider](https://nodei.co/npm/rc-slider.png)](https://npmjs.org/package/rc-slider)\n\n## Example\n\n`npm start` and then go to http://localhost:8000\n\nOnline examples: https://slider.react-component.now.sh/\n\n## Usage\n\n## Slider\n```js\nimport Slider from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cSlider /\u003e\n  \u003c/\u003e\n);\n```\n\n## Range\nPlease refer to [#825](https://github.com/react-component/slider/issues/825) for information regarding usage of `Range`.\nAn example:\n```js\nimport Slider, { Range } from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cSlider range /\u003e\n  \u003c/\u003e\n);\n```\n\n## Compatibility\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eElectron |\n| --- | --- | --- | --- | --- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n## API\n\n### createSliderWithTooltip(Slider | Range) =\u003e React.Component\n\nAn extension to make Slider or Range support Tooltip on handle.\n\n```js\nconst Slider = require('rc-slider');\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;\nconst Range = createSliderWithTooltip(Slider.Range);\n```\n\n[Online demo](http://react-component.github.io/slider/?path=/story/rc-slider--handle)\n\nAfter Range or Slider was wrapped by createSliderWithTooltip, it will have the following props:\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| tipFormatter | (value: number): React.ReactNode | `value =\u003e value` | A function to format tooltip's overlay |\n| tipProps | Object | `{` \u003cbr\u003e`placement: 'top',` \u003cbr\u003e ` prefixCls: 'rc-slider-tooltip',` \u003cbr\u003e `overlay: tipFormatter(value)` \u003cbr\u003e `}` | A function to format tooltip's overlay |\n\n### Common API\n\nThe following APIs are shared by Slider and Range.\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| className | string | `''` | Additional CSS class for the root DOM node |\n| min | number | `0` | The minimum value of the slider |\n| max | number | `100` | The maximum value of the slider |\n| id        | string  | `''`    | Unique identifier for the component, used for accessibility |\n| marks | `{number: ReactNode}` or`{number: { style, label }}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties. |\n| step | number or `null` | `1` | Value to be added or subtracted on each step the slider makes. Must be greater than zero, and `max` - `min` should be evenly divisible by the step value. \u003cbr /\u003e When `marks` is not an empty object, `step` can be set to `null`, to make `marks` as steps. |\n| vertical | boolean | `false` | If vertical is `true`, the slider will be vertical. |\n| handle | (props) =\u003e React.ReactNode | | A handle generator which could be used to customized handle. |\n| included | boolean | `true` | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |\n| reverse | boolean | `false` | If the value is `true`, it means the component is rendered reverse. |\n| disabled | boolean | `false` | If `true`, handles can't be moved. |\n| keyboard | boolean | `true` | Support using keyboard to move handlers. |\n| dots | boolean | `false` | When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots. |\n| onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |\n| onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. |\n| onChangeComplete | Function | NOOP | `onChangeComplete` will be triggered when `ontouchend` or `onmouseup` is triggered. |\n| minimumTrackStyle | Object |  | please use  `trackStyle` instead. (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x `) |\n| maximumTrackStyle | Object |  | please use  `railStyle` instead (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x`) |\n| handleStyle | Array[Object] \\| Object | `[{}]` | The style used for handle. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for multi handle following element order`) |\n| trackStyle | Array[Object] \\| Object | `[{}]` | The style used for track. (`both for slider(`Object`) and range(`Array of Object`), the array will be used for multi track following element order`)|\n| railStyle | Object | `{}` | The style used for the track base color.  |\n| dotStyle | Object \\| (dotValue) =\u003e Object | `{}` | The style used for the dots. |\n| activeDotStyle | Object \\| (dotValue) =\u003e Object | `{}` | The style used for the active dots. |\n\n### Slider\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| defaultValue | number | `0` | Set initial value of slider. |\n| value | number | - | Set current value of slider. |\n| startPoint | number | `undefined` | Track starts from this value. If `undefined`, `min` is used. |\n| tabIndex | number | `0` | Set the tabIndex of the slider handle. |\n| ariaLabelForHandle | string | - | Set the `aria-label` attribute on the slider handle.  |\n| ariaLabelledByForHandle | string | - | Set the `aria-labelledby` attribute on the slider handle. |\n| ariaRequired | boolean | - | Set the `aria-required` attribute on the slider handle. |\n| ariaValueTextFormatterForHandle | (value) =\u003e string | - | A function to set the `aria-valuetext` attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) for more information. |\n\n### Range\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| defaultValue | `number[]` | `[0, 0]` | Set initial positions of handles. |\n| value | `number[]` | | Set current positions of handles. |\n| tabIndex | number[] | `[0, 0]` | Set the tabIndex of each handle. |\n| ariaLabelGroupForHandles | Array[string] | - | Set the `aria-label` attribute on each handle. |\n| ariaLabelledByGroupForHandles | Array[string] | - | Set the `aria-labelledby` attribute on each handle. |\n| ariaValueTextFormatterGroupForHandles | Array[(value) =\u003e string] | - | A function to set the `aria-valuetext` attribute on each handle. It receives the current value of the slider and returns a formatted string describing the value. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) for more information. |\n| count | number | `1` | Determine how many ranges to render, and multiple handles will be rendered (number + 1). |\n| allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |\n| pushable | boolean or number | `false` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving a handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |\n| draggableTrack | boolean | `false` | Open the track drag. open after click on the track will be invalid. |\n\n### SliderTooltip\n\nThe Tooltip Component that keep following with content.\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Test Case\n\n`npm run test`\n\n## Coverage\n\n`npm run coverage`\n## License\n\n`rc-slider` is released under the MIT license.\n","funding_links":["https://github.com/sponsors/ant-design","https://opencollective.com/ant-design"],"categories":["Uncategorized","UI Components","UI Frameworks","JavaScript","Demos","TypeScript","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Form Components","Responsive","Slider"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Fslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fslider/lists"}