react-two-thumb-input-range-react18-custom
v1.0.7
Published
Accessible two thumb input range component for React that implements <input type=range>
Downloads
14
Maintainers
Readme
react-two-thumb-input-range
TwoThumbInputRange
is a React component allowing users to input numeric values within a specific range.
Native HTML input type=range sliders do not support multiple thumbs yet so this component uses two range inputs and position them to look like a multi-thumb slider.
Under the hood TwoThumbInputRange
uses HTML input type=range, but uses CSS Magic to allows users to adjust with 2 buttons
Features
- [x] Multi-Touch support
- [x] Accessible with ARIA and keyboard support
- [x] Highly Customizable
- [x] Written in TypeScript
Examples
All examples available in Storybook
Installation
yarn add react-two-thumb-input-range
# or
npm i react-two-thumb-input-range
Import components
import { TwoThumbInputRange } from "react-two-thumb-input-range"
Usage
function App() {
const [value, setValue] = useState([1000, 4333])
const onValueSChange = (values) => {
setValue(values)
}
return <TwoThumbInputRange onChange={onValueChange} values={value} min={1000} max={10000} />
}
Props
| Attribute | Type | Default | Description |
| :-------------- | :-------------------: | :-------: | :--------------------------------------------------------------------------------------------------------------------------------- |
| min | number
| 0 | The minimum permitted value. |
| max | number
| 100 | The maximum permitted value. |
| values | [number,number]
| | The current value of the Input Range. |
| onChange | func
| | Callback function that is fired when the Input's value changed. onChange: ([number, number]) => void |
| railColor | string
| #EDF2F7
| Color of rail element. |
| trackColor | string
| #1976d2
| Color of track element. |
| thumbColor | string
| #EDF2F7
| Color of thumb element. |
| thumbStyle | React.CSSProperties
| 1976d2
| Styles applied to the thumb element |
| thumbFocusStyle | React.CSSProperties
| | Styles applied to the when thumb element focus |
| inputStyle | `React.CSSProperties` |
| Styles applied to the input element |
| labelStyle | React.CSSProperties
| | Styles applied to the label element |
| labelTextStyle | `React.CSSProperties` |
| Styles applied to the label textelement |
| showLabels | boolean
| true
| If false, the default labels will not render. |
| ariaValueText | string
| | MDN Web Docs |