{"_id":"@bolttech/ob-atoms-range-slider","_rev":"4-74f112f4c558e31bfa8e81976b3b3e4f","name":"@bolttech/ob-atoms-range-slider","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-range-slider","version":"1.0.0","_id":"@bolttech/ob-atoms-range-slider@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"7d78becb793382ecb362a95da5ffede2672aad7f","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-range-slider/-/ob-atoms-range-slider-1.0.0.tgz","fileCount":9,"integrity":"sha512-J2ATkjYprIP8BC7ZKStFJ7YmrnYx15Zv6+Uk7eJ8a+ovtI2NsNPOShZ8wGNjaDR/SMIi2j+Ej85JiuihRgXLfQ==","signatures":[{"sig":"MEUCIA7FSeK3khSIHGtsIkgWtKr2zGT9QzKCbUvaAwq+yxaoAiEAkoSsU3R8rDxhCDMooJwXmaOK2DZhSQ2YrH/AprKUEBg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77004},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"3c7d369734caa5afd21cd0507a83c301be125296","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-range-slider_1.0.0_1778515882594_0.01666896208396418","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-range-slider","version":"1.0.1","_id":"@bolttech/ob-atoms-range-slider@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"09657cbbc7d6ea3cb966c677dbaea3b3a22d1862","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-range-slider/-/ob-atoms-range-slider-1.0.1.tgz","fileCount":5,"integrity":"sha512-v2+KGfIhxwKeTibfS73RXVWIGTKU+45wE3d0dge6fTYQQUehhmwbqjoLzMzR5sjOQ95o58ZRhSB43thHElx/8A==","signatures":[{"sig":"MEUCIQD3pakwwRSoEO4MXsc16NQtO5lbgnoQMvkV+MQniSjjfQIgBpFlRl0ucWcXxrXcFHGd+ZfBuJT18ied/taP0oSXsz8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70592},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"01e0ea14794980529827f97ff27e3f2b41257447","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-range-slider_1.0.1_1780926995510_0.8605447267356419","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-range-slider","version":"1.0.2","_id":"@bolttech/ob-atoms-range-slider@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"a4523fbb386198f95f4916dfca89e0da2ebf2ae0","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-range-slider/-/ob-atoms-range-slider-1.0.2.tgz","fileCount":9,"integrity":"sha512-GAkWEBW2GsxgK/uQYnFaCpdRRms8HpbTMHuOaMtVwBci1vKJ4qLhhg+A+NDfwvZr80hv55eOJPSsDga1HCvq3g==","signatures":[{"sig":"MEYCIQCiocHxHhNnIDvg2MaZBC0kU3OUvGrOZGSjUUqnqEY1fQIhAMxqJP6rf74o/Y17TT3Qe/PwgNVjcJe2xz5UtGszUj9k","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75441},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"108a52eb83ba2174fd4c22efcd81212365c27818","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-range-slider_1.0.2_1788778939484_0.5694470331113062","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-range-slider","version":"1.0.3","dependencies":{"@bolttech/ui-utils":"0.6.7","react":"19.1.2","classnames":"^2.5.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-range-slider@1.0.3","gitHead":"42a4e49089ee80522fbe0ffc5b218d593d8688d8","description":"The **RangeSlider** component is a React component designed to provide a range slider input element with customizable options such as minimum, maximum, step, and value range. This component is a part of the project's UI module and is intended to offer a u","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-aSALus06y8Hm+NtdrzjjnG0ha7PTlBLE7CGJ16plaEbvK2aKIVtp89sOT+tCDAgC/FG5Zh7utMTaICR0lrhhHA==","shasum":"2ecd2bcc5225caf900df673b96674a78d3fd9e34","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-range-slider/-/ob-atoms-range-slider-1.0.3.tgz","fileCount":8,"unpackedSize":79001,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGRQgmjSbehaRF8asFucpQtJlJ0q98myWufAdQuoEgiSAiEAs7MA5CPV+oaEfh3BLq56R6S9Tbgq40VNw6EKDbnGge0="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-range-slider_1.0.3_1788796487249_0.6181609445199565"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:11:22.475Z","modified":"2026-09-07T15:54:47.586Z","1.0.0":"2026-05-11T16:11:22.746Z","1.0.1":"2026-06-08T13:56:35.709Z","1.0.2":"2026-09-07T11:02:19.623Z","1.0.3":"2026-09-07T15:54:47.374Z"},"description":"The **RangeSlider** component is a React component designed to provide a range slider input element with customizable options such as minimum, maximum, step, and value range. This component is a part of the project's UI module and is intended to offer a u","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# RangeSlider Component\n\nThe **RangeSlider** component is a React component designed to provide a range slider input element with customizable options such as minimum, maximum, step, and value range. This component is a part of the project's UI module and is intended to offer a user-friendly way to select a range of values within specified bounds.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n\n## Installation\n\nTo use the **RangeSlider** component in your React application, you need to follow these steps:\n\n### Using npm\n\n```bash\nnpm install @bolttech/atoms-range-slider\n```\n\n### Using Yarn\n\n```bash\nyarn add @bolttech/atoms-range-slider\n```\n\nOnce you have the required dependencies installed, you can start using the `RangeSlider` component in your React application.\n\n## Usage\n\nThe **RangeSlider** component provides a range slider input element along with the ability to customize its appearance and behavior using various props.\n\nTo use the component, import it and include it in your JSX:\n\n```jsx\nimport React from 'react';\nimport {RangeSlider} from '@bolttech/atoms-range-slider';\n\nfunction App() {\n  return (\n    <RangeSlider\n      id=\"range-slider-1\"\n      dataTestId=\"range-slider-1\"\n      min={0}\n      max={100}\n      values={[20, 80]}\n      step={5}\n      onChange={(values) => console.log('Selected values:', values)}\n    />\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **RangeSlider** component accepts the following props:\n\n| Prop             | Type          | Description                                               |\n|------------------|---------------|-----------------------------------------------------------|\n| `id`             | string        | The ID attribute for the range slider container.          |\n| `dataTestId`     | string        | The data-testid attribute for testing purposes.           |\n| `min`            | number        | The minimum value of the range slider.                    |\n| `max`            | number        | The maximum value of the range slider.                    |\n| `values`         | number[]      | An array containing the current selected values.          |\n| `step`           | number        | The step interval between selectable values.              |\n| `disabled`       | boolean       | Whether the range slider is disabled.                     |\n| `onChange`       | function      | A callback function triggered when values change.         |\n| `formatText`     | function      | A function to format the displayed value text.            |\n\n## Example\n\nHere's an example of using the **RangeSlider** component:\n\n```jsx\n<RangeSlider\n  id=\"slider-1\"\n  dataTestId=\"slider-1\"\n  min={0}\n  max={100}\n  values={[25, 75]}\n  step={10}\n  onChange={(values) => console.log('Selected values:', values)}\n  formatText={(value) => `${value}%`}\n/>\n```\n\nThis will render a **RangeSlider** component with a range from 0 to 100, default values of 25 and 75, step intervals of 10, and a custom text formatting function to display percentage values.\n\n## Contributing\n\nContributions to the **RangeSlider** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.\n","readmeFilename":"README.md"}