Slider

A slider allows a user to select one or more values within a range.

Installation

CLI

Copy & Paste

bash

npx @sly-cli/sly add draft-ui slider

Examples

Default

The default Slider uses orientation horizontal.

Example

Code

Opacity

Vertical

Set the orientation prop to vertical to use a vertical Slider.

Important

orientation value passed to SliderFilledTrack must be set to vertical and you must give SliderTrack a specific height for this variation to be styled correctly.

Example

Code

Vertical Slider