{"id":15726862,"url":"https://github.com/usulpro/react-state-slider","last_synced_at":"2026-05-03T16:32:06.651Z","repository":{"id":57345301,"uuid":"122945212","full_name":"usulpro/react-state-slider","owner":"usulpro","description":"Responsive slider smoothly switchable between states. It's controllable by mouse and touch screen","archived":false,"fork":false,"pushed_at":"2018-03-10T11:18:52.000Z","size":1024,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-14T12:45:35.664Z","etag":null,"topics":["component","draggable","mobile","react","responsive","slider","smooth-scrolling","snap","stage","stages","state","states","touch","touchscreen","ui"],"latest_commit_sha":null,"homepage":"https://usulpro.github.io/react-state-slider/","language":"JavaScript","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/usulpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-26T09:23:55.000Z","updated_at":"2022-10-09T12:01:29.000Z","dependencies_parsed_at":"2022-09-14T04:20:25.086Z","dependency_job_id":null,"html_url":"https://github.com/usulpro/react-state-slider","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/usulpro/react-state-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-state-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-state-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-state-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-state-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usulpro","download_url":"https://codeload.github.com/usulpro/react-state-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-state-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32577120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","draggable","mobile","react","responsive","slider","smooth-scrolling","snap","stage","stages","state","states","touch","touchscreen","ui"],"created_at":"2024-10-03T22:41:09.266Z","updated_at":"2026-05-03T16:32:06.620Z","avatar_url":"https://github.com/usulpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-state-slider.svg)](https://badge.fury.io/js/react-state-slider)\n[![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://usulpro.github.io/react-state-slider)\n\n# React State Slider\n\n\nResponsive slider smoothly switchable between states. It's controllable by mouse and touch screen.\n\nYou can drag the thumb by mouse or by touch. States will interact while you dragging. As soon as you release the thumb it will jump to the nearest state.\n\nYou can click or tap on the slider. And it smoothly scroll to the neareat state. During scrolling states passing by thumb will interact as well.\n\n\nDemo https://usulpro.github.io/react-state-slider\n\n[![slider](https://github.com/UsulPro/react-state-slider/raw/master/doc/slider.jpg)](https://github.com/UsulPro/react-state-slider/raw/master/doc/slider.jpg)\n\n## Usage\n\n```sh\nnpm i react-state-slider --save\n```\n\n```js\nimport Slider, { createPoint } from 'react-state-slider';\n// createPoint is an auxiliary tool for creating states array. It's up to you whether to use it\n\n\n// somewhere in your app:\n\nrender() {\n  return (\n    \u003cSlider /\u003e\n  )\n}\n```\n\n## API\n\nReact State Slider is highly customizable by passing `props` to the component.\n\n### Prop types\n\n```js\nconst propTypes = {\n  snapMagnet: PropTypes.number, // snaping distance around state point\n  speed: PropTypes.number, // speed of the thumb when you clicking on the track\n  frontZone: PropTypes.number, // The distance within which the thumb affects the state points (in %%)\n  rearZone: PropTypes.number, // frontZone - when moving toward to points, rearZone - backward of points\n  points: PropTypes.arrayOf(\n    // array of states\n    PropTypes.shape({\n      snap: PropTypes.number, // distance to the point in %%\n      renderTop: PropTypes.func, // function that render a top state component (see details below)\n      renderBottom: PropTypes.func, // function that render a bottom state component (see details below)\n    })\n  ),\n  initPos: PropTypes.number, // the index of initial state (from 0)\n  onChange: PropTypes.func, // invokes when the thumb appears in new state (see details below)\n  onDrag: PropTypes.func, // invokes when thumb is dragging\n  classNames: PropTypes.shape(), // classNames of slider root, track, active track and thumb\n  styles: PropTypes.shape(), // classNames for slider root, track, active track and thumb\n  debug: PropTypes.bool, // will show additional information for each state point\n};\n```\n\n### Default props\n\n```js\nconst defaultProps = {\n  snapMagnet: 30,\n  speed: 1.5,\n  frontZone: 10,\n  rearZone: 10,\n  points: new Array(9)\n    .fill(0)\n    .map((v, ind, arr) =\u003e createPoint({ ind, total: arr.length })),\n  initPos: 4,\n  onChange: () =\u003e {},\n  onDrag: () =\u003e {},\n  classNames: {\n    slider: 'react-state-slider',\n    track: 'track',\n    activeTrack: 'active-track',\n    thumb: 'thumb',\n  },\n  styles: {\n    slider: {},\n    track: {},\n    activeTrack: {},\n    thumb: {},\n  },\n  debug: false,\n};\n```\n\n### renderTop (renderBottom)\n\n```js\nrenderTop = (nFactor, trackWidth) =\u003e \u003cTopComponent /\u003e;\n```\n\nwhere `nFactor` (`0 \u003c nFactor \u003c 1`)\nis a coefficient that shows the distance between the thumb and this point. It's `0` when distance \u003e `frontZone` (`rearZone`) and `1` when the thumb is exactly on the point.\n\n`trackWidth` - is a current widh of the track. **Note** renderTop (renderBottom) will invoke when you resizing a browser window, so you can responsively control how your component appearance depending on screen resolution.\n\n### onChange\n\n```js\nonChange({\n  trackWidth, // width of a track element\n  ...this.state, // state of the component\n  ind, // the index of a current state\n});\n```\n\nwhere state is:\n\n```js\n{\n  valuePC, // distance of the thumb in %%\n  valuePX, // distance of the thumb in pixels\n  valueTr, // distance of the nearest state point in pixels\n}\n```\n\n### createPoint\n\nTo create your custom states you need to pass them to the `points` prop of this Slider. You can do it manually, but in some cases it's more productive to use `createPoint` for that. It will calculate the %% for each point depending on the amount of them. You can do it the follow way:\n\n```js\nimport Slider, { createPoint } from 'react-state-slider';\n\nconst statesAmount = 9;\nconst topFn = (nFactor, trackWidth) =\u003e { /* return Top Component */}\nconst bottomFn = (nFactor, trackWidth) =\u003e { /* return Bottom Component */}\n\n\u003cSlider\n  points={new Array(statesAmount).fill(0).map((v, ind, arr) =\u003e\n    createPoint({\n      ind,\n      total: arr.length,\n      top: topFn,\n      bottom: bottomFn,\n    })\n  )}\n/\u003e\n\n```\n\n## Credits\n\n\u003csub\u003eIf you use this component could you kindly consider to [star](https://github.com/UsulPro/react-state-slider/stargazers) this project\u003c/sub\u003e\n\nCreated with ❤︎ to OSS by [@UsulPro](https://twitter.com/UsulPro)\n\nany contributions are highly welcome!\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Freact-state-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusulpro%2Freact-state-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Freact-state-slider/lists"}