Range slider

Last updated: 2.0.0 (18/01/2024)

The Range slider is an expansion of the single-handle Slider component. This component can simultaneously support a virtually limitless number of handles.

Usage

import { RangeSlider } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState([25, 50, 75]);

    return ( 
        <RangeSlider 
            value={value}
            setValue={setValue}
        />
    )
}

The number of values handled (and therefore handles displayed) is determined by the number of initial values passed to the useState.

Minimum distance & pearling

You can stop one thumb from pushing its peers when they collide by using the pearling prop. Additionally, the minDistance prop controls the minimum distance that two thumbs can become. If pearling=true, the thumbs will begin pushing one another around once they reach the minDistance from one another.

import { RangeSlider } from "@valence-ui/core";

function MyComponent() { 
    const [value, setValue] = React.useState([25, 50, 75]);

    return ( 
        <RangeSlider 
            value={value}
            setValue={setValue}
            
            pearling={false}
            minDistance={10}
        />
    )
}

Other modifications

Other modifications can be made to the Range slider using the same props as the regular Slider.

See the Slider reference.

---

Props

Extends GenericInputProps<number[]> and SliderEventProps<number[]>.

Property	Type	Description
min	number	The minimum value of this input. 0 by default.
max	number	The maximum value of this input. 100 by default.
step	number	The step value of this input. 1 by default.
minDistance	number	The minimum distance between the two thumbs. 0 by default.
pearling	boolean	Whether the active thumb will push other thumbs. true by default.
showValue	boolean	Whether to show this slider's value on the thumb. false by default.
invert	boolean	Whether to invert the direction of the slider. false by default.
includeManualInput	boolean	Whether to include a manual input with this slider. true by default.
manualInputPosition	"left" | "right"	The position of this manual input, if shown. "right" by default.
trackProps	Omit<SliderTrackProps, "state">	Optional props to pass to track components.
thumbProps	Omit<SliderThumbProps, "state">	Optional props to pass to thumb components.