Runway

100

The Slider component creates a highly customizable slider input that can be used to select a value from a range.

You can customize, the track (both active and inactive), the thumb, and the labels.

Usage

javascript
1import { Slider } from "@components/atoms/slider";
2
3<Slider
4    min={0}
5    max={100}
6    step={1}
7    defaultValue={30}
8    onChange={(value) => console.log(value)}
9</Slider>

Props

Prop	Type	Default	Description
min	number	`0`	The minimum value of the slider.
max	number	`100`	The maximum value of the slider.
step	number	`1`	The step value of the slider.
defaultValue	number	`50`	The default value of the slider.
showLabels	boolean	`false`	If true, shows the min and max labels.
valuePosition	"left" \| "right" \| "follow" \| "none"	`"follow"`	The position of the value label. Can be "left", "right", "follow" or "" to hide).
color	string	`"primary"`	The color of the slider (uses tailwind.config).
inactiveColor	string	`"gray"`	The color of the inactive track (uses tailwind.config).
variant	"solid" \| "soft"	`"solid"`	The variant of the slider.
showThumb	boolean	`true`	If true, shows the thumb.
thumbBorderColor	string	`"gray"`	The border color of the thumb (uses tailwind.config).
thumbBorderRadius	string	`"lg"`	The border radius of the thumb (uses Tailwind border radius to shape component).
thumbSize	string	`"5"`	The size of the thumb.
thumbBorder	boolean	`true`	If true, shows the border of the thumb.
thumbScale	boolean	`true`	If true, scales the thumb on hover.
thumbClassName	string	`""`	Additional Tailwind utility classes for the thumb.
activeTrackWidth	string	`"3"`	The width of the active track.
inactiveTrackWidth	string	`"1"`	The width of the inactive track.
activeTrackBorderRadius	string	`"full"`	The border radius of the active track (uses Tailwind border radius to shape component).
inactiveTrackBorderRadius	string	`"full"`	The border radius of the inactive track (uses Tailwind border radius to shape component).
activeTrackClassName	string	`""`	Additional Tailwind utility classes for the active track.
inactiveTrackClassName	string	`""`	Additional Tailwind utility classes for the inactive track.
onChange	function	-	The change handler for the slider.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes for the `input` element.

Looks like a lot of props? Don't worry, they are all optional and have sensible defaults.

Examples

Basic Sliders

Slider with Labels

100

Custom Sliders

Experiment with different props and styles to create sliders that fit your design needs and use cases.