react-ranger
Hooks for building range and multi-range sliders in React.
Quick Features
- Headless!
- Single or Multiple Handles
- Handle Devider Items
- Custom Steps or Step-Size
- Custom Ticks
Examples
- Basic - CodeSandbox - Source
- Multi-Range - CodeSandbox - Source
- Custom Steps - CodeSandbox - Source
- Custom Styles - CodeSandbox - Source
- Update On Drag - CodeSandbox - Source
Installation
Sample Usage
The following is a very basic example of a single range input that looks similar to Chrome's default appearance.
Options
value: Array<number>
- The current value (or values) for the range- Required
min: number
- The minimum limit for the range- Required
max: number
- The maximum limit for the range- Required
stepSize: number
- The distance between selectable steps- Required
steps: arrayOf(number)
- An array of custom steps to use. This will overridestepSize
,tickSize: number
ticks: arrayOf(number): Default: 10
- An array of custom ticks to use. This will overridetickSize
,onChange: Function(newValue)
- A function that is called when the handle is releasedonDrag: Function(newValue)
- A function that is called when a handled is draggedinterpolator: { getPercentageForValue: Function(value) => decimal, getValueForClientX: Function(x) => value}
- The Interpolator to use
- Defualts to the bundled linear-scale interpolator
See the Interpolation section for more info
Returns
useRanger
returns an object
with the following properties:
getTrackProps(userProps): func
- A function that takes optional props and returns the combined necessary props for the track component.ticks: array
- Ticks to be rendered. Eachtick
has the following props:value: number
- The tick number to be displayedgetTickProps(userProps): func
- A function that take optional props and returns the combined necessary props for the tick component.
segments: array
- Segments to be rendered. Eachsegment
has the following props:value: number
- The segments ending valuegetSegmentProps(userProps): func
- A function that take optional props and returns the combined necessary props for the segment component.
handles: array
- Handles to be rendered. Eachhandle
has the following props:value: number
- The current value for the handleactive: boolean
- Denotes if the handle is currently being dragged.getHandleProps(userProps): func
- A function that take optional props and returns the combined necessary props for the handle component.
activeHandleIndex: oneOfType([null, number])
- The zero-based index of the handle that is currently being dragged, ornull
if no handle is being dragged.
Interpolation
By default, react-ranger
uses linear interpolation between data points, but allows you to easily customize it to use your own interpolation functions by passing an object that implements the following interface:
const interpolator = {
// Takes the value & range and returns a percentage [0, 100] where the value sits from left to right
getPercentageForValue: (val: number, min: number, max: number): number
// Takes the clientX (offset from the left edge of the ranger) along with the dimensions
// and range settings and transforms a pixel coordinate back into a value
getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number
}
Here is an exmaple of building and using a logarithmic interpolator!