{"_id":"@busshi/react-range-slider","_rev":"1-0ddf3d89dab82fdd12069768e3a5d1ec","name":"@busshi/react-range-slider","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@busshi/react-range-slider","version":"1.0.0","description":"A custom range slider component for React","private":false,"main":"src/index.tsx","license":"MIT","repository":{"type":"git","url":"git+https://github.com/busshi/npm-react-range-slider.git"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"keywords":["React","Slider"],"bugs":{"url":"https://github.com/busshi/npm-react-range-slider/issues"},"homepage":"https://github.com/busshi/npm-react-range-slider#readme","type":"module","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/react":"^18.0.27","@types/react-dom":"^18.0.10","@vitejs/plugin-react":"^3.1.0","typescript":"^4.9.3","vite":"^4.1.0"},"types":"./src/index.d.ts","gitHead":"d4ace9167501a0e4868a6715fb2f0022cbb895cf","_id":"@busshi/react-range-slider@1.0.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-wOBSblPD89ZVVxDQ5SDo88iJ84GbH8EHBOo5gUhI8WXfdOqY25D23PyG/oxabWapvXYl6//TnaPIoA2c+yCfeQ==","shasum":"b0d224e9d9e5f178893985a440f30af82ea040b8","tarball":"https://registry.npmjs.org/@busshi/react-range-slider/-/react-range-slider-1.0.0.tgz","fileCount":13,"unpackedSize":9291,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHx/71qL1Wz/dN5OAFPpTOZiBegzN5TO1EPIDRkvceEJAiEAjKUvbmpZo4qgOCuw7eLmxPODkB068wuhQwqd3CUUbyc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8kyUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwtg//fVAQ7uWshsPnaIosIkWwJdekO5TizKuUEBxenukp0GKkFb0Z\r\nDZc22SgftF8RqYTTutBnElpaqXMDgaaMkNpNDXR5huUtjpTBqu7wFypIuLXh\r\nLRS4o5mZHGd/GI72bxcXZvfXEVX+Gd233xrMoSpgS0fy4aOx/Qx/WKQu4CJf\r\nOQLtWzeTK4ejt02INMg0paxzvyzbozRTNIwCK+Ax0U7DXKFaZJaup9SFTztO\r\nlb16WPCCU0qqVNbBfy3iY4WsuRtGLQHQhqVsL776FQ2WuKn1/hr5aJD6IHP2\r\nWFCn0yoNmZrk+q+rIQmzgBLiR/fsIbPLTM7ZDW6SoW4brqHr0RYJr2TKMWy+\r\n8OcjbIG5E3nVXefBMGfTmm0Rydlpi4+MXtcFCL/HLgXkqfqB+Nq/mbNn2sB3\r\n4ARdofBC325ZKAVYm/glgb2aIwMd2+Df1rTt6HDjfC0v/n32vAmeliFO3kWc\r\ne4sOxXN3oAmWNRIjvfk9DPjInmBXmFV/0HNiMcSR35BGcU23r3mzmIz0COh2\r\nhVQbHZ3MdgxDdJ+MejfCB7tKytcovTJrsaZ1sS+FaNg6gpmVYCkpnREcWGaY\r\nszKa/FnD7eC8VF0VMKW2azkweN3NNB3+4etZ4dLXJmX57ZoIXaHHNpQFCD7L\r\nAdRutbHutEbrYfWW16hPn9WxN90rkYib4fk=\r\n=ZL6b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"busshi","email":"busshi973@icloud.com"},"directories":{},"maintainers":[{"name":"busshi","email":"busshi973@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-range-slider_1.0.0_1676823700086_0.027810553499472812"},"_hasShrinkwrap":false},"1.0.1":{"name":"@busshi/react-range-slider","version":"1.0.1","description":"A custom range slider component for React","private":false,"main":"src/index.tsx","license":"MIT","repository":{"type":"git","url":"git+https://github.com/busshi/npm-react-range-slider.git"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"keywords":["React","Slider"],"bugs":{"url":"https://github.com/busshi/npm-react-range-slider/issues"},"homepage":"https://github.com/busshi/npm-react-range-slider#readme","type":"module","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/react":"^18.0.27","@types/react-dom":"^18.0.10","@vitejs/plugin-react":"^3.1.0","typescript":"^4.9.3","vite":"^4.1.0"},"types":"./src/index.d.ts","gitHead":"f70419bf6dd13a85323cc835440007825ab60a7e","_id":"@busshi/react-range-slider@1.0.1","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-8Hbhq1pBzR/xisPK0dex/hFBm6FQgPvYJf2OiRDI/t7ZAEQo7C+9v1THI/iHzIsN+q0ltkcdEbhI1YbvnNzjLQ==","shasum":"6df6907b3a9eeb819d3c70e65f5daea8dc5c7778","tarball":"https://registry.npmjs.org/@busshi/react-range-slider/-/react-range-slider-1.0.1.tgz","fileCount":13,"unpackedSize":9452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZIk2EKDnI3DKDTpPiWVl4DDBu18tCU+VcVYgodgdq2AiAO9kczmxyaBWB+wQIKAUPXTLoJV31q1sByhfDy7ulp4Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8k2SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZlQ/8CNS/TJ6Z/aiTlpS5qPiJ3XaWP/08V63bCv7CmDZgPQHe+xsb\r\nk2xOqgHFoD0GPl5KT//X28lbHEgiXGhGoAuX8/xesgCOCkYWRQnhsl6ILNXl\r\nEz5WQVR7pTHBBduBhQ3ysfj2ijE0q0wGD7zCqGd4sg8DN7A2GcPnmY/auAhg\r\nzhxR+DRw/nHuCT11tMXxnOvK+/1x6aBf+LzDoJOClHbY/YzouOSufCEfMicO\r\n9M2jS/Ym14AdqlrXCyehZpFKmVnyYMcO00+ORWUUtvFTxagvhC5T7U4Va451\r\nlISvG311SCX/unlUF1R1neHBzfvMUvs/y0yvAFET1YVQsTT88LVI7piEu/Mu\r\ntaAjDF9snWaFEJJbzs+O+tNiCeZLKNfK0lRBpz2tVlhJ7LU8tYKWmY4AJXHJ\r\nbwncEB1oMj3lwez4+IU6sTU7p/5mHPNitd37+RqE8fct2xSh9lW222//Miu4\r\nHirMbvscJ0bUPr/ZVEUNTVfY/83CHb2bxVl19no6Ja2miM2vhCZTk5/M8i8R\r\n0oTU+hP+Rtj3PYiPeMWhmytAOBgZSbhqkVUpAA2pI2rNUlXHRgN3b9WPuRop\r\nPSHIdf4mkccArMi8gUCe9+lpSx5dFmzza6+rGOniQe0FXRP4vZtpUJpaW5tY\r\nFp0fE3MD8Dt7GmOYvVhVw95fmhPfd5Q5l0U=\r\n=Lr3W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"busshi","email":"busshi973@icloud.com"},"directories":{},"maintainers":[{"name":"busshi","email":"busshi973@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-range-slider_1.0.1_1676823954611_0.8011120463288783"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-19T16:21:40.009Z","1.0.0":"2023-02-19T16:21:40.369Z","modified":"2023-02-19T16:25:54.883Z","1.0.1":"2023-02-19T16:25:54.796Z"},"maintainers":[{"name":"busshi","email":"busshi973@icloud.com"}],"description":"A custom range slider component for React","homepage":"https://github.com/busshi/npm-react-range-slider#readme","keywords":["React","Slider"],"repository":{"type":"git","url":"git+https://github.com/busshi/npm-react-range-slider.git"},"bugs":{"url":"https://github.com/busshi/npm-react-range-slider/issues"},"license":"MIT","readme":"![publish](https://github.com/busshi/npm-react-range-slider/actions/workflows/publish-npm.yml/badge.svg)\n\n# React-Range-Slider\n\nA custom React Range Slider component reusable without extra dependency (only React dependencies).\n\n## Installation\n\n`yarn add @busshi/react-range-slider` or `npm install @busshi/react-range-slider`\n\n## Custom range slider properties\n\n| Props    | Type                                             | Default value | Required / Optional |\n| :------- | :----------------------------------------------- | :------------ | :------------------ |\n| value    | number                                           |               | required            |\n| onChange | (e: React.ChangeEvent<HTMLInputElement>) => void |               | required            |\n| min      | number                                           | 0             | optional            |\n| max      | number                                           | 100           | optional            |\n| step     | number                                           | 5             | optional            |\n\n## Custom style properties\n\n| Props         | Type   | Default value | Required / Optional |\n| :------------ | :----- | :------------ | :------------------ |\n| width         | string | 100px         | optional            |\n| height        | string | 3px           | optional            |\n| borderRadius  | string | 50%           | optional            |\n| background    | string | #eee          | optional            |\n| dotColor      | string | #306FDB       | optional            |\n| dotSize       | string | 12px          | optional            |\n| activeDotSize | string | 15px          | optional            |\n\n## Note\n\nColors can be passed as prop as hex (#FFF), rgb (rgb(255, 255, 255)) or as noun (white).\n\n## Usage\n\n```js\nimport RangeSlider from \"@busshi/react-range-slider\";\nimport { useState } from \"react\";\n\nfunction App() {\n  const [value, setValue] = useState(0);\n\n  return (\n    <RangeSlider\n      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n        setValue(+e.target.value);\n      }}\n      min={0}\n      max={100}\n      step={5}\n      value={value}\n      width=\"100px\"\n      height=\"3px\"\n      borderRadius=\"50%\"\n      background=\"#eee\"\n      dotColor=\"#306FDB\"\n      dotSize=\"12px\"\n      activeDotSize=\"15px\"\n    />\n  );\n}\n\nexport default App;\n```\n","readmeFilename":"README.md"}