{"_id":"@apad/rc-slider","name":"@apad/rc-slider","dist-tags":{"latest":"10.5.0"},"versions":{"10.5.0":{"name":"@apad/rc-slider","version":"10.5.0","description":"Slider UI component for React","keywords":["react","react-component","react-slider","slider","input","range"],"homepage":"http://github.com/react-component/slider/","bugs":{"url":"http://github.com/react-component/slider/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/slider.git"},"publishConfig":{"access":"public"},"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":"echo skip coverage","lint":"echo skip lint","docs:build":"dumi build","docs:deploy":"gh-pages -d .doc","now-build":"npm run docs:build","prettier":"prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"","start":"dumi dev","test":"rc-test"},"dependencies":{"@babel/runtime":"^7.10.1","classnames":"^2.2.5","rc-util":"^5.27.0"},"devDependencies":{"@rc-component/father-plugin":"^1.0.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/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":"^27.6.0","eslint-plugin-unicorn":"^49.0.0","father":"^4.3.5","father-build":"^1.18.6","gh-pages":"^6.1.0","glob":"^7.1.6","less":"^4.1.3","np":"^9.1.0","rc-test":"^7.0.15","rc-tooltip":"^6.1.2","rc-trigger":"^5.3.4","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"},"gitHead":"a97d0aa1806a06408f0cc810308bca9c51d195b1","_id":"@apad/rc-slider@10.5.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-dqAcr24G60otaIQr7+XJpO1NAELvglaTikYXY28Gl8vYSP3JGvVarOoHwlczoWw7rOkPQgWmBbiF9Pr3HjMeqA==","shasum":"1bcc73c7b55efa47d6f9b34fc75ee8a2b36e5415","tarball":"https://registry.npmjs.org/@apad/rc-slider/-/rc-slider-10.5.0.tgz","fileCount":64,"unpackedSize":151988,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvGTjIvBYhzMZrycOUaapZrFcw2EoU7qy82hTfCPVg3AiEAx1hONwW17aIMFtwPDetKYvopNq9jzNMGDDFtyWdp+Gw="}]},"_npmUser":{"name":"apades","email":"a13258267680@gmail.com"},"directories":{},"maintainers":[{"name":"apades","email":"a13258267680@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rc-slider_10.5.0_1711082770148_0.7282797472973248"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-22T04:46:10.039Z","10.5.0":"2024-03-22T04:46:10.294Z","modified":"2024-03-22T04:46:10.886Z"},"maintainers":[{"name":"apades","email":"a13258267680@gmail.com"}],"description":"Slider UI component for React","homepage":"http://github.com/react-component/slider/","keywords":["react","react-component","react-slider","slider","input","range"],"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/slider.git"},"bugs":{"url":"http://github.com/react-component/slider/issues"},"license":"MIT","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 () => (\n <>\n \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-slider';\nimport 'rc-slider/assets/index.css';\n\nexport default () => (\n <>\n \n \n);\n```\n\n## Compatibility\n\n| [\"IE](http://godban.github.io/browsers-support-badges/)
IE / Edge | [\"Firefox\"](http://godban.github.io/browsers-support-badges/)
Firefox | [\"Chrome\"](http://godban.github.io/browsers-support-badges/)
Chrome | [\"Safari\"](http://godban.github.io/browsers-support-badges/)
Safari | [\"Electron\"](http://godban.github.io/browsers-support-badges/)
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-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 | `{`
`placement: 'top',`
` prefixCls: 'rc-slider-tooltip',`
`overlay: tipFormatter(value)`
`}` | 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| 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.
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| 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","readmeFilename":"README.md"}