UI Components

Sliders/Scrollbar

Sliders and Scrollbars are interactive controls used to adjust values or navigate through scrollable content. Despite having similar visual structures, they serve different purposes: Slider — used to set or adjust a value (e.g., size, opacity, spacing). Scrollbar — used to navigate content vertically or horizontally (e.g., galleries, dropdown menus, scrollable panels). Both components support consistent visual states and value positions to ensure predictable interaction patterns across the interface.

RangeSlider

A RangeSlider is a horizontal control that allows users to choose a value within a predefined range by moving a draggable thumb along a track. It is commonly used on configuration panels, settings controls, and any place where a precise yet simple numeric adjustment is required. Built on @radix-ui/react-slider with custom styles from Figma design.

States

RangeSlider supports interactive states: Default and Hovered.

1. Default State

The normal state of the slider before user interaction.

Value: 0

Value: 50

Value: 100

2. Interactive RangeSlider

RangeSlider with controlled value. Hover over the thumb to see the hovered state.

Current Value: 50

Values

Values represent the position of the slider's thumb on the track:

  • • 0 — Thumb positioned at the start of the track (minimum value)
  • • 50 — Thumb centered (mid-value)
  • • 100 — Thumb at the end of the track (maximum value)

Minimum (0)

Mid-value (50)

Maximum (100)

Usage Examples

Volume Control

Volume50%

ScrollArea

A ScrollArea is a navigation control that lets users scroll through content that exceeds the visible area. Unlike sliders, scrollbars reflect the current scroll position of content rather than setting a value. Scrollbars can be vertical or horizontal, depending on the content layout. Built on @radix-ui/react-scroll-area with custom styles from Figma design. The scrollbar automatically hides when not needed.

Types

Vertical ScrollArea

ScrollArea with vertical scrolling. The scrollbar appears automatically when content exceeds the visible area.

Short Content (no scrollbar)

Item 1

This is a short content item. No scrollbar needed.

Item 2

This is a short content item. No scrollbar needed.

Item 3

This is a short content item. No scrollbar needed.

Long Content (with scrollbar)

Item 1

Scroll down to see more items. The scrollbar appears automatically.

Item 2

Scroll down to see more items. The scrollbar appears automatically.

Item 3

Scroll down to see more items. The scrollbar appears automatically.

Item 4

Scroll down to see more items. The scrollbar appears automatically.

Item 5

Scroll down to see more items. The scrollbar appears automatically.

Item 6

Scroll down to see more items. The scrollbar appears automatically.

Item 7

Scroll down to see more items. The scrollbar appears automatically.

Item 8

Scroll down to see more items. The scrollbar appears automatically.

Item 9

Scroll down to see more items. The scrollbar appears automatically.

Item 10

Scroll down to see more items. The scrollbar appears automatically.

Item 11

Scroll down to see more items. The scrollbar appears automatically.

Item 12

Scroll down to see more items. The scrollbar appears automatically.

Item 13

Scroll down to see more items. The scrollbar appears automatically.

Item 14

Scroll down to see more items. The scrollbar appears automatically.

Item 15

Scroll down to see more items. The scrollbar appears automatically.

Item 16

Scroll down to see more items. The scrollbar appears automatically.

Item 17

Scroll down to see more items. The scrollbar appears automatically.

Item 18

Scroll down to see more items. The scrollbar appears automatically.

Item 19

Scroll down to see more items. The scrollbar appears automatically.

Item 20

Scroll down to see more items. The scrollbar appears automatically.

Item 21

Scroll down to see more items. The scrollbar appears automatically.

Item 22

Scroll down to see more items. The scrollbar appears automatically.

Item 23

Scroll down to see more items. The scrollbar appears automatically.

Item 24

Scroll down to see more items. The scrollbar appears automatically.

Item 25

Scroll down to see more items. The scrollbar appears automatically.

Item 26

Scroll down to see more items. The scrollbar appears automatically.

Item 27

Scroll down to see more items. The scrollbar appears automatically.

Item 28

Scroll down to see more items. The scrollbar appears automatically.

Item 29

Scroll down to see more items. The scrollbar appears automatically.

Item 30

Scroll down to see more items. The scrollbar appears automatically.

Horizontal ScrollArea

ScrollArea with horizontal scrolling. Scroll horizontally to see the scrollbar update.

Card 1

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 2

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 3

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 4

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 5

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 6

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 7

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 8

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 9

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 10

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 11

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 12

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 13

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 14

Scroll horizontally to see more cards and watch the custom scrollbar update.

Card 15

Scroll horizontally to see more cards and watch the custom scrollbar update.

Both Vertical and Horizontal ScrollArea

ScrollArea with both vertical and horizontal scrolling. Scroll in any direction to see both scrollbars update.

Item 1

Grid 4x4 with fixed size cells. Scroll both directions.

Item 2

Grid 4x4 with fixed size cells. Scroll both directions.

Item 3

Grid 4x4 with fixed size cells. Scroll both directions.

Item 4

Grid 4x4 with fixed size cells. Scroll both directions.

Item 5

Grid 4x4 with fixed size cells. Scroll both directions.

Item 6

Grid 4x4 with fixed size cells. Scroll both directions.

Item 7

Grid 4x4 with fixed size cells. Scroll both directions.

Item 8

Grid 4x4 with fixed size cells. Scroll both directions.

Item 9

Grid 4x4 with fixed size cells. Scroll both directions.

Item 10

Grid 4x4 with fixed size cells. Scroll both directions.

Item 11

Grid 4x4 with fixed size cells. Scroll both directions.

Item 12

Grid 4x4 with fixed size cells. Scroll both directions.

Item 13

Grid 4x4 with fixed size cells. Scroll both directions.

Item 14

Grid 4x4 with fixed size cells. Scroll both directions.

Item 15

Grid 4x4 with fixed size cells. Scroll both directions.

Item 16

Grid 4x4 with fixed size cells. Scroll both directions.

Item 17

Grid 4x4 with fixed size cells. Scroll both directions.

Item 18

Grid 4x4 with fixed size cells. Scroll both directions.

Item 19

Grid 4x4 with fixed size cells. Scroll both directions.

Item 20

Grid 4x4 with fixed size cells. Scroll both directions.

Item 21

Grid 4x4 with fixed size cells. Scroll both directions.

Item 22

Grid 4x4 with fixed size cells. Scroll both directions.

Item 23

Grid 4x4 with fixed size cells. Scroll both directions.

Item 24

Grid 4x4 with fixed size cells. Scroll both directions.

Item 25

Grid 4x4 with fixed size cells. Scroll both directions.

Item 26

Grid 4x4 with fixed size cells. Scroll both directions.

Item 27

Grid 4x4 with fixed size cells. Scroll both directions.

Item 28

Grid 4x4 with fixed size cells. Scroll both directions.

Item 29

Grid 4x4 with fixed size cells. Scroll both directions.

Item 30

Grid 4x4 with fixed size cells. Scroll both directions.

Item 31

Grid 4x4 with fixed size cells. Scroll both directions.

Item 32

Grid 4x4 with fixed size cells. Scroll both directions.

Item 33

Grid 4x4 with fixed size cells. Scroll both directions.

Item 34

Grid 4x4 with fixed size cells. Scroll both directions.

Item 35

Grid 4x4 with fixed size cells. Scroll both directions.

Item 36

Grid 4x4 with fixed size cells. Scroll both directions.

Item 37

Grid 4x4 with fixed size cells. Scroll both directions.

Item 38

Grid 4x4 with fixed size cells. Scroll both directions.

Item 39

Grid 4x4 with fixed size cells. Scroll both directions.

Item 40

Grid 4x4 with fixed size cells. Scroll both directions.

Item 41

Grid 4x4 with fixed size cells. Scroll both directions.

Item 42

Grid 4x4 with fixed size cells. Scroll both directions.

Item 43

Grid 4x4 with fixed size cells. Scroll both directions.

Item 44

Grid 4x4 with fixed size cells. Scroll both directions.

Item 45

Grid 4x4 with fixed size cells. Scroll both directions.

Item 46

Grid 4x4 with fixed size cells. Scroll both directions.

Item 47

Grid 4x4 with fixed size cells. Scroll both directions.

Item 48

Grid 4x4 with fixed size cells. Scroll both directions.

Item 49

Grid 4x4 with fixed size cells. Scroll both directions.

Item 50

Grid 4x4 with fixed size cells. Scroll both directions.

Item 51

Grid 4x4 with fixed size cells. Scroll both directions.

Item 52

Grid 4x4 with fixed size cells. Scroll both directions.

Item 53

Grid 4x4 with fixed size cells. Scroll both directions.

Item 54

Grid 4x4 with fixed size cells. Scroll both directions.

Item 55

Grid 4x4 with fixed size cells. Scroll both directions.

Item 56

Grid 4x4 with fixed size cells. Scroll both directions.

Item 57

Grid 4x4 with fixed size cells. Scroll both directions.

Item 58

Grid 4x4 with fixed size cells. Scroll both directions.

Item 59

Grid 4x4 with fixed size cells. Scroll both directions.

Item 60

Grid 4x4 with fixed size cells. Scroll both directions.

Item 61

Grid 4x4 with fixed size cells. Scroll both directions.

Item 62

Grid 4x4 with fixed size cells. Scroll both directions.

Item 63

Grid 4x4 with fixed size cells. Scroll both directions.

Item 64

Grid 4x4 with fixed size cells. Scroll both directions.

Values

Values indicate the thumb position along the scrollable track:

  • • 0 — Start of the scroll (top for vertical, left for horizontal)
  • • 50 — Middle of the scrollable area
  • • 100 — End of the scroll (bottom for vertical, right for horizontal)

Behavior & Interaction Principles

RangeSlider

  • • Users can drag the thumb or tap the track to move to a specific position
  • • Movement is smooth, with immediate visual and value feedback
  • • Slider interactions should be continuous, without discrete jumps unless defined by system logic
  • • The track may have two color segments: filled (active value) and remaining (inactive)
  • • The thumb should maintain a clear focus state for accessibility

ScrollArea

  • • Users can drag the scrollbar thumb or use scroll gestures (wheel, trackpad, touch)
  • • Thumb size should reflect the ratio of visible content to total content
  • • Movement should be smooth and responsive
  • • Scrollbars automatically hide when not needed
  • • Both vertical and horizontal scrollbars must support keyboard navigation for accessibility

Usage Guidelines

RangeSlider

  • • Use sliders for adjustable numeric or visual properties (e.g., size, opacity, volume)
  • • Avoid using sliders for settings that require exact numerical input — pair with a numeric field if precision is needed
  • • Place sliders horizontally only; vertical orientation is not recommended
  • • Provide clear labels or helper text to explain what the slider controls

ScrollArea

  • • Use scrollbars for containers where content exceeds available space
  • • Keep scrollbar visuals minimal to avoid distraction
  • • For galleries, grids, and dropdowns, ensure scrollbars do not obstruct interactive elements
  • • Respect platform and OS conventions (e.g., macOS overlay scrollbars)
  • • Avoid overusing scrollbars — adjust layouts instead when possible