{"_id":"@rc-component/slider","_rev":"4537795","name":"@rc-component/slider","description":"Slider UI component for React","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"time":{"modified":"2026-04-09T15:02:31.000Z","created":"2025-09-11T09:30:35.134Z","1.0.1":"2025-11-28T02:59:12.459Z","1.0.0":"2025-09-11T09:30:35.134Z"},"users":{},"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/slider.git"},"versions":{"1.0.1":{"name":"@rc-component/slider","version":"1.0.1","description":"Slider UI component for React","keywords":["react","react-component","react-slider","slider","input","range"],"homepage":"https://react-component.github.io/slider","bugs":{"url":"http://github.com/react-component/slider/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/slider.git"},"license":"MIT","main":"./lib/index","module":"./es/index","types":"./lib/index.d.ts","style":"./assets/index.css","scripts":{"compile":"father build && lessc assets/index.less assets/index.css","coverage":"rc-test --coverage","docs:build":"dumi build","docs:deploy":"gh-pages -d .doc","lint":"eslint src/ --ext .ts,.tsx,.jsx,.js,.md","now-build":"npm run docs:build","prepublishOnly":"npm run compile && rc-np","prettier":"prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"","start":"dumi dev","test":"rc-test","tsc":"bunx tsc --noEmit"},"dependencies":{"@rc-component/util":"^1.3.0","clsx":"^2.1.1"},"devDependencies":{"@rc-component/father-plugin":"^2.1.3","@rc-component/np":"^1.0.0","@rc-component/tooltip":"^1.2.1","@rc-component/trigger":"^3.5.2","@testing-library/jest-dom":"^6.1.5","@testing-library/react":"^12.1.3","@types/jest":"^29.5.1","@types/node":"^22.5.0","@types/react":"^18.2.42","@types/react-dom":"^18.0.11","@umijs/fabric":"^4.0.1","cross-env":"^7.0.0","dumi":"^2.2.10","eslint":"^8.54.0","eslint-plugin-jest":"^28.2.0","eslint-plugin-unicorn":"^54.0.0","father":"^4.3.5","father-build":"^1.18.6","gh-pages":"^6.1.0","glob":"^7.1.6","less":"^4.1.3","rc-test":"^7.0.15","react":"^16.0.0","react-dom":"^16.0.0","regenerator-runtime":"^0.14.0","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"engines":{"node":">=8.x"},"_id":"@rc-component/slider@1.0.1","gitHead":"0e4e031e33d804b1059fbb9b02ac53c57ec4f8ef","_nodeVersion":"22.8.0","_npmVersion":"11.6.0","dist":{"shasum":"a869eb09be343cfc580b28608edb0b230ceb1f04","size":22928,"noattachment":false,"key":"/@rc-component/slider/-/@rc-component/slider-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/slider/download/@rc-component/slider-1.0.1.tgz"},"_npmUser":{"name":"afc163","email":"afc163@gmail.com"},"directories":{},"maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/slider_1.0.1_1764298752237_0.8275646224686333"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-11-28T02:59:12.459Z","publish_time":1764298752459,"_source_registry_name":"default","_cnpm_publish_time":1764298752459},"1.0.0":{"name":"@rc-component/slider","version":"1.0.0","description":"Slider UI component for React","keywords":["react","react-component","react-slider","slider","input","range"],"homepage":"https://react-component.github.io/slider","bugs":{"url":"http://github.com/react-component/slider/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/slider.git"},"license":"MIT","main":"./lib/index","module":"./es/index","types":"./lib/index.d.ts","style":"./assets/index.css","scripts":{"compile":"father build && lessc assets/index.less assets/index.css","coverage":"rc-test --coverage","docs:build":"dumi build","docs:deploy":"gh-pages -d .doc","lint":"eslint src/ --ext .ts,.tsx,.jsx,.js,.md","now-build":"npm run docs:build","prepublishOnly":"npm run compile && rc-np","prettier":"prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"","start":"dumi dev","test":"rc-test","tsc":"bunx tsc --noEmit"},"dependencies":{"@rc-component/util":"^1.3.0","classnames":"^2.2.5"},"devDependencies":{"@rc-component/father-plugin":"^2.1.3","@rc-component/np":"^1.0.0","@rc-component/tooltip":"^1.2.1","@rc-component/trigger":"^3.5.2","@testing-library/jest-dom":"^6.1.5","@testing-library/react":"^12.1.3","@types/classnames":"^2.2.9","@types/jest":"^29.5.1","@types/node":"^22.5.0","@types/react":"^18.2.42","@types/react-dom":"^18.0.11","@umijs/fabric":"^4.0.1","cross-env":"^7.0.0","dumi":"^2.2.10","eslint":"^8.54.0","eslint-plugin-jest":"^28.2.0","eslint-plugin-unicorn":"^54.0.0","father":"^4.3.5","father-build":"^1.18.6","gh-pages":"^6.1.0","glob":"^7.1.6","less":"^4.1.3","rc-test":"^7.0.15","react":"^16.0.0","react-dom":"^16.0.0","regenerator-runtime":"^0.14.0","typescript":"^5.1.6"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"engines":{"node":">=8.x"},"_id":"@rc-component/slider@1.0.0","gitHead":"8d68868ecd999b200cfba8c8530a4093e24ad163","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"shasum":"fac767676fb182bf95b18ae6c4b22c8a0fa4be1b","size":22963,"noattachment":false,"key":"/@rc-component/slider/-/@rc-component/slider-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/slider/download/@rc-component/slider-1.0.0.tgz"},"_npmUser":{"name":"zombiej","email":"smith3816@gmail.com"},"directories":{},"maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/slider_1.0.0_1757583034971_0.3200916856554148"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-09-11T09:30:35.134Z","publish_time":1757583035134,"_source_registry_name":"default","_cnpm_publish_time":1757583035134}},"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-component/slider';\nimport '@rc-component/slider/assets/index.css';\n\nexport default () => (\n  <>\n    <Slider />\n  </>\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-component/slider';\nimport '@rc-component/slider/assets/index.css';\n\nexport default () => (\n  <>\n    <Slider range />\n  </>\n);\n```\n\n## Compatibility\n\n| [<img src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" />](http://godban.github.io/browsers-support-badges/)<br>Electron |\n| --- | --- | --- | --- | --- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n## API\n\n### createSliderWithTooltip(Slider | Range) => React.Component\n\nAn extension to make Slider or Range support Tooltip on handle.\n\n```js\nconst Slider = require('@rc-component/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 => value` | A function to format tooltip's overlay |\n| tipProps | Object | `{` <br>`placement: 'top',` <br> ` prefixCls: 'rc-slider-tooltip',` <br> `overlay: tipFormatter(value)` <br> `}` | 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. <br /> 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) => 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) => Object | `{}` | The style used for the dots. |\n| activeDotStyle | Object \\| (dotValue) => 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) => 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) => 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","_attachments":{},"homepage":"https://react-component.github.io/slider","bugs":{"url":"http://github.com/react-component/slider/issues"},"license":"MIT"}