1. Docs
  2. Slider

Slider

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

Installation

Copy and paste the following code into your project.

Loading...

Update the import paths to match your project setup.

Usage

Basic

Value Label

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter ofs Intl.NumberFormat and is applied based on the current locale.

50

Vertical

Sliders are horizontally oriented by default. The orientation prop can be set to "vertical" to create a vertical slider.