Ethereal Garden

Slider

An input that allows users to select a value from a range.

When To Use

Use the Slider component when you need to:

  • Allow users to select a value or range from a continuous set of values
  • Provide control for adjusting settings that have a minimum and maximum value
  • Create interfaces for audio volume, brightness, or opacity controls
  • Allow users to set a range within defined boundaries
  • Create visual controls for numeric inputs with a finite range

Sliders are useful when the precise value is not as important as the relative position within the allowed range.

Examples

Basic

Value: 50

Range

Range: 25 - 75

Step

Step Size: 5

Value: 25

Step Size: 10

0
10
20
30
40
50
60
70
80
90
100

Step Size: 20 (min: 20, max: 80)

20
40
60
80

Custom

50%
75%
ColdCoolNormalWarmHot

Props

PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-