Slider

Last updated: 2.0.0 (18/01/2024)

Sliders are a more visually-focused alternative to the Number input. By default, the slider will include a number input without controls positioned directly to its right.

Usage

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

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

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

Min, max & step

Sliders will default to a minimum of 0, maximum of 100 and step of 1. This can be modified using the min, max and step props, respectively:

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

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

    return ( 
        <Slider
            value={value}
            setValue={setValue}
            
            min={-50}
            max={200}
            step={10}
        />
    )
}

Moving or hiding the manual input

By default, a "manual" number input will be positioned directly to the right of the slider. This can be moved or hidden entirely using the manualInputPosition and includeManualInput props:

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

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

    return ( 
        <Slider
            value={value}
            setValue={setValue}
            
            manualInputPosition="left"    // Move the number input
            includeManualInput={false}    // Hide the number input
        />
    )
}

Complex handle

By passing true into the showValue prop, the value of the slider will be displayed on the slider handle itself. This is especially recommended if you have hidden the manual input.

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

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

    return ( 
        <Slider
            value={value}
            setValue={setValue}
            
            showValue={true}
        />
    )
}

---

Props

Extends GenericInputProps<number> and SliderEventProps.

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.
showValue	boolean	Whether to show this slider's value on the thumb. false by default.
invert	invert	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 the track component.
thumbProps	Omit<SliderThumbProps, "state">	Optional props to pass to the thumb component.

SliderEventProps

Accepts T = number as an optional type identifier.

Property	Type	Description
onAfterChange	(value: T, thumbIndex: number) => void	Callback fired after a thumb has been moved.
onBeforeChange	(value: T, thumbIndex: number) => void	Callback fired before a thumb is starting to move.
onChange	(value: T, thumbIndex: number) => void	Callback fired when the value of this input changes.
onSliderClick	(value: number) => void	Callback fired when any part of the slider is clicked.

SliderTrackProps

Extends StyledFlexProps.

Property	Type	Description
state (required)	{ index: number, value: number }	(internal use)
highlight	boolean	Whether to highlight this track. false by default.

SliderThumbProps

Extends StyledFlexProps.

Property	Type	Description
state (required)	{ index: number, valueNow: number, value: number }	(internal use)
showValue	boolean	Whether to show the value of this slider. false by default.