Thrive Design System

Components

Slider

A range input control for selecting a numeric value or range within a defined minimum and maximum.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Slider } from '@thrivecart/ui';

Examples

Basic Slider

Default

Simple value slider

<Slider defaultValue={[50]} max={100} step={1} />

With Label and Value

Labeled Slider

Slider showing the current value

75
<Slider defaultValue={[75]} max={100} step={1} label="Volume" showValue />

Sizes

Slider Sizes

Available in small, medium, and large

<div className="flex flex-col gap-6">
<Slider defaultValue={[30]} max={100} size="sm" label="Small" />
<Slider defaultValue={[50]} max={100} size="md" label="Medium" />
<Slider defaultValue={[70]} max={100} size="lg" label="Large" />
</div>

Best Practices

✓

Show the current value

Display the numeric value near the slider so users know the exact selection.

✓

Define meaningful bounds

Set min and max to logical limits. Don't use 0-100 if the range is 50-200.

✗

Don't use for precise entry

If users need to type exact numbers, provide a NumberInput alongside or instead.

✗

Don't use very small step values

Steps too small (e.g., 0.001) make the slider hard to control.

Props

Props

Accessibility

  • Keyboard controlled with Arrow keys (Left/Right for horizontal, Up/Down for vertical).
  • Home/End keys jump to min/max values.
  • Uses role="slider" with aria-valuemin, aria-valuemax, aria-valuenow.
  • Label is associated via aria-label or aria-labelledby.