{"id":13406234,"url":"https://github.com/sghall/react-compound-slider","last_synced_at":"2025-05-15T10:06:29.543Z","repository":{"id":24811435,"uuid":"99958377","full_name":"sghall/react-compound-slider","owner":"sghall","description":":black_medium_small_square: React Compound Slider | A small React slider with no opinion on markup or styles","archived":false,"fork":false,"pushed_at":"2022-11-09T20:58:58.000Z","size":10304,"stargazers_count":621,"open_issues_count":24,"forks_count":80,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-01T12:41:57.728Z","etag":null,"topics":["javascript","multi-slider","react","react-component","slider","slider-component","slider-range","typescript"],"latest_commit_sha":null,"homepage":"https://react-compound-slider.netlify.com","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/sghall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-10T19:32:46.000Z","updated_at":"2025-03-02T15:52:14.000Z","dependencies_parsed_at":"2022-08-19T12:40:32.766Z","dependency_job_id":null,"html_url":"https://github.com/sghall/react-compound-slider","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Freact-compound-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Freact-compound-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Freact-compound-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sghall%2Freact-compound-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sghall","download_url":"https://codeload.github.com/sghall/react-compound-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253717600,"owners_count":21952514,"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":["javascript","multi-slider","react","react-component","slider","slider-component","slider-range","typescript"],"created_at":"2024-07-30T19:02:24.819Z","updated_at":"2025-05-15T10:06:24.511Z","avatar_url":"https://github.com/sghall.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Components"],"sub_categories":["Inputs"],"readme":"\u003cdiv style=\"text-align:center;\"\u003e\n  \u003ca href=\"https://sghall.github.io/react-compound-slider\" target=\"\\_parent\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4615775/51296069-8fa30780-19d7-11e9-9399-ace98ee439f0.png\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## React Compound Slider\n\nWelcome to the future. React Compound Slider is a small slider component with no opinion about markup or styles.\n\n### [Documentation and Examples](https://react-compound-slider.netlify.com)\n\n[![Coverage Status](https://coveralls.io/repos/github/sghall/react-compound-slider/badge.svg?branch=master)](https://coveralls.io/github/sghall/react-compound-slider?branch=master)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-compound-slider/blob/master/LICENSE)\n[![npm downloads](https://img.shields.io/npm/dm/react-compound-slider.svg)](https://www.npmjs.com/package/react-compound-slider)\n[![npm version](https://img.shields.io/npm/v/react-compound-slider.svg)](https://www.npmjs.com/package/react-compound-slider)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/sghall/react-compound-slider.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/sghall/react-compound-slider/context:javascript)\n\n\u003cdiv style=\"text-align:center;\"\u003e\n  \u003ca href=\"https://sghall.github.io/react-compound-slider\" target=\"\\_parent\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4615775/46690444-2aa96b80-cbb7-11e8-8cdd-d1af59df59fe.png\" alt=\"React Compound Slider\" style=\"width:450px;\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n### 2020 Roadmap\n\nBasic Overview:\n\n- Convert slider source to Typescript (done)\n- Convert tests to Typescript (done)\n- Convert demos and docs to Typescript (done)\n- Use hooks internally and export them\n- Drive state changes with a reducer that can be changed by the user\n\nThe upcoming versions of this slider will allow for more customization. I don't expect any significant changes for existing users.\n\n### Motivation\n\nThis library aims to be a stable platform for creating slider components with a very small impact on bundle size. It is primarily aimed at application developers and npm package maintainers. You can create your own set of controls matched exactly to your application style, but it takes a little more effort than other components out there. You need to be comfortable handling what gets rendered and styling your components to really get maximum value from this library. There are quite a few demos on the website but they should be used as a starting point. You can also create your own custom themed slider component for your favorite framework and release it on npm for others to use.\n\n### Slider Features\n\n- Small size\n- Makes no assumptions about your markup\n- Supports SVG sliders\n- Supports typescript\n- Precise control over user interactions and styling\n- Horizontal/vertical display\n- The display of values can be reversed\n- Supports mouse and touch events (tested in IE9+, Chrome, Firefox \u0026 Safari)\n- Supports keyboard events so handles can be moved using arrow keys\n- Create any type of slider (value, range, n-handled sliders)\n- Generates uniformly spaced, human-readable tick values to label your slider\n- Integrates seemlessly with any app styling approach (CSS, CSS-in-JS, Inline-styles)\n- Interaction modes (Allow crossing, Prevent crossing, Pushable mode, Create your own mode)\n- Works as a controlled component\n\n### [Documentation and Examples](https://react-compound-slider.netlify.com)\n\n### More Examples on CodeSandbox\n\n- [Basic Multi-Slider on CodeSandbox](https://codesandbox.io/s/plzyr7lmj)\n- [Date/Time Slider on CodeSandbox](https://codesandbox.io/s/rw97j317p)\n- [Video Slider on CodeSandbox](https://codesandbox.io/s/1z51zn6q23)\n- [Slider w/ Tooltips (Typescript)](https://codesandbox.io/s/pjwwzzj8qm)\n- [SVG Slider on CodeSandbox](https://codesandbox.io/s/qk0vovqw6)\n- [Value Slider on CodeSandbox (Typescript)](https://codesandbox.io/s/6zpjmw1x3w)\n- [Range Slider on CodeSandbox (Typescript)](https://codesandbox.io/s/zl8nrlp9x)\n- [Custom Feet-Inches Ticks on CodeSandbox (Typescript)](https://codesandbox.io/s/5262w7r9yx)\n- [Custom Feet-Inches Ticks - Vertical on CodeSandbox (Typescript)](https://codesandbox.io/s/18lkz04y8j)\n- [Material Design Example on CodeSandbox](https://codesandbox.io/s/k91omlr1wo) by [@RafeSacks](https://github.com/RafeSacks)\n- [Slider with Bar Chart on CodeSandbox](https://codesandbox.io/s/rangeslider-with-histogram-voos8) by [@magician11](https://github.com/magician11) See [#85](https://github.com/sghall/react-compound-slider/issues/85).\n\n# Installation\n\nReact Compound Slider is available as an [npm package](https://www.npmjs.org/package/react-compound-slider).\n\nTo install and save in your `package.json` dependencies, run:\n\n```\n// React 16.3 or greater\nnpm install react-compound-slider\n\n// React 15.0 -\u003e 16.2\nnpm install react-compound-slider@0.16.3\n```\n\n## Documentation\n\nThe documentation is divided into several sections:\n\n- [Live Demos](https://sghall.github.io/react-compound-slider/#/slider-demos/horizontal)\n- [Tutorial](https://sghall.github.io/react-compound-slider/#/getting-started/tutorial)\n- [Documentation](https://sghall.github.io/react-compound-slider/#/component-api/slider)\n\n### Example Usage\n\nYou have full control of everything that is rendered. Just render the `Slider` children that you want. Don't need ticks? Don't use `Ticks`. Don't want a rail? Don't use `Rail`. Just create the local rail, handle, track and tick components that you want and render those using whatever styling method you prefer.\n\nYou can use these components from the demos to jumpstart your slider:\n\n[Starter Components - Horizontal](https://github.com/sghall/react-compound-slider/blob/master/docs/src/demos/horizontal/components.tsx)\n\n[Starter Components - Vertical](https://github.com/sghall/react-compound-slider/blob/master/docs/src/demos/vertical/components.tsx)\n\n[Starter Components - Material UI](https://github.com/sghall/react-compound-slider/blob/master/docs/src/demos/material-ui/components.tsx)\n\n[Starter Components - With Tooltips](https://github.com/sghall/react-compound-slider/blob/master/docs/src/demos/tooltips/components.tsx)\n\n[Basic Tooltip CSS](https://github.com/sghall/react-compound-slider/blob/master/docs/src/demos/tooltips/tooltip.css) (CSS from [this demo](https://www.w3schools.com/w3css/w3css_tooltips.asp))\n\n```jsx\nimport { Slider, Handles, Tracks } from 'react-compound-slider'\nimport { Handle, Track, Tick } from './your-local-slider-components'\n\n  \u003cSlider\n    rootStyle={sliderStyle}\n    domain={[0, 100]} // [min, max]\n    values={[20, 60, 80]} // slider values\n  \u003e\n    \u003cRail\u003e\n      {({ getRailProps }) =\u003e (\n        \u003cdiv style={railStyle} {...getRailProps()} /\u003e // render your clickable rail!\n      )}\n    \u003c/Rail\u003e\n    \u003cHandles\u003e\n      {({ handles, getHandleProps }) =\u003e (\n        // render your handles!\n      )}\n    \u003c/Handles\u003e\n    \u003cTracks left={false} right={false}\u003e\n      {({ tracks, getTrackProps }) =\u003e (\n        // render your (optional) tracks!\n      )}\n    \u003c/Tracks\u003e\n    \u003cTicks count={10}\u003e\n      {({ ticks }) =\u003e (\n        // render your (optional) ticks!\n        // count prop = auto generate approximately 10 uniformly spaced, human-readable ticks\n      )}\n    \u003c/Ticks\u003e\n  \u003c/Slider\u003e\n```\n\n### Approach\n\nThis library takes a [compound component](https://www.youtube.com/watch?v=hEGg-3pIHlE) approach to creating sliders that separates the data/logic from presentation.\n\nIf you're familiar with Kent Dodd's work on Paypal's [downshift](https://github.com/paypal/downshift) or [react-toggled](https://github.com/kentcdodds/react-toggled) then the pattern should seem familiar.\nThe components use the [function as child components pattern](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).\n\nIn practical terms this means you can create just about any kind of slider you can imagine and use whatever style approach you want.\nBy taking this approach it also frees you up to render whatever markup you want to customize your slider.\nThe `Slider` streams you the data and really only cares about the dimensions of the outer div where it takes its measurements from.\n\nIn general slider components are composed of a relatively positioned outer div with elements absolutely positioned inside by a percentage.\nIn this library the `Handles`, `Tracks`, and `Ticks` components are used as children to the `Slider` component and they let you tap into a stream of values and percentages that you can then use to render your own components.\n\nSlider Artwork by Guilhem from the Noun Project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsghall%2Freact-compound-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsghall%2Freact-compound-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsghall%2Freact-compound-slider/lists"}