{"id":21511985,"url":"https://github.com/strvcom/react-sliders","last_synced_at":"2025-08-19T14:16:09.676Z","repository":{"id":38174469,"uuid":"278308700","full_name":"strvcom/react-sliders","owner":"strvcom","description":"CSS agnostic React Sliders","archived":false,"fork":false,"pushed_at":"2023-01-07T20:17:23.000Z","size":2880,"stargazers_count":13,"open_issues_count":65,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T06:29:43.644Z","etag":null,"topics":["css-agnostic","headless","hooks","react","sliders"],"latest_commit_sha":null,"homepage":"","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/strvcom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-07-09T08:34:11.000Z","updated_at":"2024-11-21T11:22:44.000Z","dependencies_parsed_at":"2023-02-08T00:31:56.407Z","dependency_job_id":null,"html_url":"https://github.com/strvcom/react-sliders","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strvcom%2Freact-sliders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strvcom%2Freact-sliders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strvcom%2Freact-sliders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strvcom%2Freact-sliders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strvcom","download_url":"https://codeload.github.com/strvcom/react-sliders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085388,"owners_count":21045152,"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":["css-agnostic","headless","hooks","react","sliders"],"created_at":"2024-11-23T22:24:47.367Z","updated_at":"2025-04-09T18:20:51.756Z","avatar_url":"https://github.com/strvcom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@strv/react-sliders`\n\n![Continuous Integration](https://github.com/strvcom/react-sliders/workflows/Continuous%20Integration/badge.svg)\n![Dependabot](https://flat.badgen.net/dependabot/strvcom/react-sliders?icon=dependabot)\n[![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/strvcom/react-sliders\u0026style=flat)](https://mergify.io)\n[![npm latest](https://badgen.net/npm/v/@strv/react-sliders)](https://www.npmjs.com/package/@strv/react-sliders)\n[![bundlephobia](https://badgen.net/bundlephobia/minzip/@strv/react-sliders)](https://bundlephobia.com/result?p=@strv/react-sliders)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n- [`@strv/react-sliders`](#strvreact-sliders)\n  - [Features](#features)\n  - [Install](#install)\n  - [Usage](#usage)\n    - [Basic Examples](#basic-examples)\n      - [`useSlider`](#useslider)\n      - [`useRangeSlider`](#userangeslider)\n    - [Hooks API](#hooks-api)\n  - [Related](#related)\n    - [Contribution](#contribution)\n    - [Authors](#authors)\n    - [License](#license)\n\n## Features\n\n- [x] Customizable \u0026 CSS agnostic\n  - **Modules**\n    - `useRangeSlider`, `useSlider` (Hooks, which encapsulates the core logic and let consumers style their own sliders as they wish)\n  - **Headless** (Inspiration [`react-table`](https://github.com/tannerlinsley/react-table), [`downshift-js`](https://github.com/downshift-js/downshift))\n- [x] A11y\n  - Full mouse \u0026 touch support\n  - [Keyboard support](https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-1.html)\n- [x] API that is easy to use \u0026 integrate\n  - with forms, ...\n- [x] Tree-shakeable \u0026 Optimized bundle\n  - out of the box thanks to [`TSDX`](https://github.com/formik/tsdx).\n- [x] [Documented API](#hooks-api) with [interactive examples on CodeSandbox](examples/README.md)\n- [x] Fully typed with TypeScript\n- [x] Based on [our already existing open source tools](https://www.strv.io/tools/frontend)\n  - [`code-quality-tools`](https://github.com/strvcom/code-quality-tools)\n- [x] Properly tested\n\n## Install\n\n```bash\n# npm\nnpm install @strv/react-sliders --save\n\n# yarn\nyarn add @strv/react-sliders\n```\n\n## Usage\n\n### Basic Examples\n\n#### `useSlider`\n\n```tsx\nimport React from 'react'\nimport { useSlider } from '@strv/react-sliders'\n\nconst SliderExample = () =\u003e {\n  const [value, setValue] = React.useState(0)\n  const { getRailProps, getTrackProps, getHandleProps } = useSlider({\n    value,\n    min: 0,\n    max: 100,\n    onChange: setValue,\n  })\n\n  return (\n    \u003cdiv className=\"slider-container\"\u003e\n      \u003cspan className=\"slider-rail\" {...getRailProps()} /\u003e\n      \u003cspan className=\"slider-track\" {...getTrackProps()} /\u003e\n\n      \u003cspan className=\"slider-handle\" {...getHandleProps()} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### `useRangeSlider`\n\n```tsx\nimport React from 'react'\nimport { useRangeSlider, TRangeTuple } from '@strv/react-sliders'\n\nconst RangeSliderExample = () =\u003e {\n  const [value, setValue] = React.useState\u003cTRangeTuple\u003e([0, 100])\n  const { getRailProps, getTrackProps, getMinHandleProps, getMaxHandleProps } = useRangeSlider({\n    value,\n    min: 0,\n    max: 100,\n    onChange: setValue,\n  })\n\n  return (\n    \u003cdiv className=\"range-slider-container\"\u003e\n      \u003cspan className=\"range-slider-rail\" {...getRailProps()} /\u003e\n      \u003cspan className=\"range-slider-track\" {...getTrackProps()} /\u003e\n\n      \u003cspan className=\"range-slider-handle\" {...getMinHandleProps()} /\u003e\n      \u003cspan className=\"range-slider-handle\" {...getMaxHandleProps()} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nIf you want so see more, head to the [list of existing CodeSandbox examples](examples/README.md).\n\n### Hooks API\n\n- [`useSlider`](src/hooks/docs/useSlider.md)\n- [`useRangeSlider`](src/hooks/docs/useRangeSlider.md)\n\n---\n\n## Related\n\nThis project was bootstrapped with [`TSDX`](https://github.com/formik/tsdx).\n\n### Contribution\n\nSee [Contributing guide](CONTRIBUTING.md)\n\n### Authors\n\n- Lukas Hudec ([@xhudec](https://github.com/xhudec))\n\n### License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrvcom%2Freact-sliders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrvcom%2Freact-sliders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrvcom%2Freact-sliders/lists"}