Slider

The Slider component creates a custom range slider. It can be a single-value slider or a double-thumb slider, and it can be oriented vertically or horizontally.

Report Issue Github

Usage

Horizontal Slider

A single-thumb slider oriented horizontally.


<Slider defaultValue={[50]} orientation="horizontal" />

Vertical Double-thumb Slider

A double-thumb slider oriented vertically.


<Flex justify="center" height="100%">
  <Slider defaultValue={[30, 70]} orientation="vertical" />
</Flex>

Radius

Change Thumb's radius using radius prop.


<Flex justify="center">
  <Slider defaultValue={[30, 70]} radius="full" />
</Flex>

Reverse

Reverse slider's direction by using reverse prop.


<Flex justify="center">
  <Slider defaultValue={[30]} radius="full" reverse />
</Flex>

API

Props

SliderProps

Prop	Type	Default	Required
`defaultValue`	`number[]`	-	Yes
`trackSize`	`number`	-	-
`thumbSize`	`number`	-	-
`reverse`	`boolean`	-	-
`orientation`	`'horizontal' \| 'vertical'`	-	-
`onPointerDown`	`(value: number[]) => void`	-	-
`onChange`	`(value: number[]) => void`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-

Select

Switch