{"id":13653176,"url":"https://github.com/davidchin/react-input-range","last_synced_at":"2025-05-14T13:07:04.677Z","repository":{"id":1613914,"uuid":"41433725","full_name":"davidchin/react-input-range","owner":"davidchin","description":"React component for inputting numeric values within a range (range slider)","archived":false,"fork":false,"pushed_at":"2024-05-20T23:38:53.000Z","size":801,"stargazers_count":714,"open_issues_count":130,"forks_count":239,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-13T01:07:27.027Z","etag":null,"topics":["form","input-range","range-slider","react","react-component"],"latest_commit_sha":null,"homepage":"","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/davidchin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-26T15:30:28.000Z","updated_at":"2025-03-12T05:10:21.000Z","dependencies_parsed_at":"2024-08-23T17:50:22.341Z","dependency_job_id":null,"html_url":"https://github.com/davidchin/react-input-range","commit_stats":{"total_commits":176,"total_committers":19,"mean_commits":9.263157894736842,"dds":"0.13636363636363635","last_synced_commit":"6f7f1d4cdd6729e24ee4b0788645151d343c7dc6"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidchin%2Freact-input-range","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidchin%2Freact-input-range/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidchin%2Freact-input-range/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidchin%2Freact-input-range/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidchin","download_url":"https://codeload.github.com/davidchin/react-input-range/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149957,"owners_count":22022851,"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":["form","input-range","range-slider","react","react-component"],"created_at":"2024-08-02T02:01:06.860Z","updated_at":"2025-05-14T13:06:59.657Z","avatar_url":"https://github.com/davidchin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-input-range\n\n`InputRange` is a React component allowing users to input numeric values within a specific range. It can accept a single value, or a range of values (min/max). By default, basic styles are applied, but can be overridden depending on your design requirements.\n\n[![Build Status](https://travis-ci.org/davidchin/react-input-range.svg?branch=master)](https://travis-ci.org/davidchin/react-input-range)\n\n## Demo\nA CodePen demo is available [here](http://codepen.io/davidchin/full/GpNvqw/).\n\n## Installation\n\n1. Install `react-input-range` using npm (or [yarn]). `npm install react-input-range`\n2. Import `react-input-range` to use `InputRange` component.\n3. Optionally, import `react-input-range/lib/css/index.css` if you want to apply the default styling.\n\n## Usage\n\nTo accept min/max value:\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport InputRange from 'react-input-range';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      value: { min: 2, max: 10 },\n    };\n  }\n\n  render() {\n    return (\n      \u003cInputRange\n        maxValue={20}\n        minValue={0}\n        value={this.state.value}\n        onChange={value =\u003e this.setState({ value })} /\u003e\n    );\n  }\n}\n\nReactDOM.render(\n  \u003cApp /\u003e,\n  document.getElementById('app')\n);\n```\n\nTo accept a single value:\n```jsx\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = { value: 10 };\n  }\n\n  render() {\n    return (\n      \u003cInputRange\n        maxValue={20}\n        minValue={0}\n        value={this.state.value}\n        onChange={value =\u003e this.setState({ value })} /\u003e\n    );\n  }\n}\n```\n\nTo format labels:\n```jsx\n\u003cInputRange\n  formatLabel={value =\u003e `${value}cm`}\n  value={this.state.value}\n  onChange={value =\u003e this.setState({ value })} /\u003e\n```\n\nTo specify the amount of increment/decrement\n```jsx\n\u003cInputRange\n  step={2}\n  value={this.state.value}\n  onChange={value =\u003e this.setState({ value })} /\u003e\n```\n\n## API\n\n### InputRange#props\n\n#### allowSameValues: boolean\n\nSet to `true` to allow `minValue` and `maxValue` to be the same.\n\n#### ariaLabelledby: string\n\nSet `aria-labelledby` attribute to your component.\n\n#### ariaControls: string\n\nSet `aria-controls` attribute to your component.\n\n#### classNames: InputRangeClassNames\n\nOverride the default CSS classes applied to your component and its sub-components.\n\n#### disabled: boolean\n\nIf this property is set to true, your component is disabled. This means you'll not able to interact with it.\n\n#### draggableTrack: boolean\n\nIf this property is set to true, you can drag the entire track.\n\n#### formatLabel: (value: number, type: string): string\n\nBy default, value labels are displayed as plain numbers. If you want to change the display, you can do so by passing in a function. The function can return something different, i.e.: append a unit, reduce the precision of a number.\n\n#### maxValue: number\n\nSet a maximum value for your component. You cannot drag your slider beyond this value.\n\n#### minValue: number\n\nSet a minimum value for your component. You cannot drag your slider under this value.\n\n#### name: string\n\nSet a name for your form component.\n\n#### onChange: (value: number | Range): void\n\nWhenever your user interacts with your component (i.e.: dragging a slider), this function gets called. Inside the function, you should assign the new value to your component.\n\n#### onChangeStart: (value: number | Range): void\n\nWhenever your user starts interacting with your component (i.e.: `onMouseDown`, or `onTouchStart`), this function gets called.\n\n#### onChangeComplete: (value: number | Range): void\n\nEvery mouse / touch event can trigger multiple updates, therefore causing `onChange` callback to fire multiple times. On the other hand, `onChangeComplete` callback only gets called when the user stops dragging.\n\n#### step: number\n\nThe default increment/decrement of your component is 1. You can change that by setting a different number to this property.\n\n#### value: number | Range\n\nSet the current value for your component. If only a single number is provided, only a single slider will get rendered. If a range object (min/max) is provided, two sliders will get rendered\n\n### Types\n\n#### InputRangeClassNames\n* activeTrack: string\n* disabledInputRange: string\n* inputRange: string\n* labelContainer: string\n* maxLabel: string\n* minLabel: string\n* slider: string\n* sliderContainer: string\n* track: string\n* valueLabel: string\n\n#### Range\n* max: number\n* min: number\n\n## Development\n\nIf you want to work on this project locally, you need to grab all of its dependencies, for which \nwe recommend using [yarn]. You can find the instructions to setup yarn [here](https://yarnpkg.com/docs/install).\n```\nyarn install\n```\n\nAfter that, you should be able run to preview\n```\nyarn dev\n```\n\nTo test\n```\nyarn test\n```\n\nContributions are welcome. :)\n\n[yarn]: https://yarnpkg.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidchin%2Freact-input-range","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidchin%2Freact-input-range","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidchin%2Freact-input-range/lists"}