ComponentsFormSlider

Slider

6 colors · 5 sizes · thumb styles · track styles · marks · range · vertical

BasicColorsThumb stylesTrack stylesSizesMarksWith inputRangeVertical

Overview

6 colors · 5 sizes · thumb styles · track styles · marks · range · vertical

Default slider

Live preview

Use a slider when people benefit from adjusting an approximate value within a bounded range.

Volume72%
App.tsx
tsx
import { Slider } from 'omverse-ui'
 
const [volume, setVolume] = useState(72)
 
<Slider
label="Volume"
value={volume}
onChange={setVolume}
showLabels
showTooltip
formatValue={value => String(value) + '%'}
/>

Always communicate the range and current value. Use a numeric Input when an exact value matters more than quick adjustment.

Choose a step size that reflects meaningful domain increments rather than visual smoothness alone.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Slider when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Basic

Live preview

showLabels shows min/max, showTooltip shows the current value above the thumb

72
0100
72
0100
App.tsx
tsx
const [volume, setVolume] = useState(72)
 
<Slider value={volume} onChange={setVolume} showLabels showTooltip />
<Slider value={volume} onChange={setVolume} showLabels showTooltip disabled />

Colors

Live preview

Six color variants for the track and thumb

App.tsx
tsx
<Slider defaultValue={60} color="default" showTooltip />
<Slider defaultValue={60} color="secondary" showTooltip />
<Slider defaultValue={60} color="success" showTooltip />
<Slider defaultValue={60} color="warning" showTooltip />
<Slider defaultValue={60} color="error" showTooltip />

Thumb styles

Live preview

default, pill, square, and bubble thumb shapes

50
50
App.tsx
tsx
<Slider defaultValue={50} thumbStyle="default" showTooltip />
<Slider defaultValue={50} thumbStyle="pill" showTooltip />
<Slider defaultValue={50} thumbStyle="square" showTooltip />
<Slider defaultValue={50} thumbStyle="bubble" showTooltip />

Track styles

Live preview

default, glow, gradient, and spectrum filled track styles

App.tsx
tsx
<Slider defaultValue={65} trackStyle="default" showTooltip formatValue={v => `${v}%`} />
<Slider defaultValue={65} trackStyle="glow" showTooltip formatValue={v => `${v}%`} />
<Slider defaultValue={65} trackStyle="gradient" showTooltip formatValue={v => `${v}%`} />
<Slider defaultValue={65} trackStyle="spectrum" showTooltip formatValue={v => `${v}%`} />

Sizes

Live preview

Five track heights: xs, sm, md (default), lg, xl

App.tsx
tsx
<Slider defaultValue={50} size="xs" showTooltip />
<Slider defaultValue={50} size="sm" showTooltip />
<Slider defaultValue={50} size="md" showTooltip />
<Slider defaultValue={50} size="lg" showTooltip />
<Slider defaultValue={50} size="xl" showTooltip />

With marks

Live preview

Auto tick marks every step, or custom marks with labels

35
0100
60
0°20°40°60°80°100°
0100
App.tsx
tsx
const temperatureMarks = [
{ value: 0, label: '0°' },
{ value: 20, label: '20°' },
{ value: 40, label: '40°' },
{ value: 60, label: '60°' },
{ value: 80, label: '80°' },
{ value: 100, label: '100°' },
]
 
{/* Auto marks every 20% */}
<Slider value={temp} onChange={setTemp} step={20} showMarks showTooltip showLabels />
 
{/* Custom marks with labels */}
<Slider value={temp} onChange={setTemp} marks={temperatureMarks} showTooltip showLabels />

With input

Live preview

showInput adds a number input field that stays in sync with the slider

App.tsx
tsx
<Slider value={brightness} onChange={setBrightness} showInput showTooltip />

Range slider

Live preview

RangeSlider lets the user select a min/max range with two thumbs

$250 — $750
$0$1000
App.tsx
tsx
const [price, setPrice] = useState<[number, number]>([250, 750])
 
<RangeSlider
value={price}
onChange={setPrice}
min={0}
max={1000}
showTooltip
showLabels
formatValue={v => `$${v}`}
/>

Vertical

Live preview

Set orientation=vertical for column-direction sliders

App.tsx
tsx
<Slider
value={opacity}
onChange={setOpacity}
orientation="vertical"
showTooltip
showLabels
formatValue={v => `${v}%`}
/>

Volume control

Live preview

Pair an Icon with a Slider for a compact media control

72
App.tsx
tsx
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<i className="ti ti-volume" style={{ fontSize: 16, color: 'var(--color-text-secondary)', flexShrink: 0 }} aria-hidden="true" />
<Slider
value={volume}
onChange={setVolume}
size="xs"
thumbStyle="default"
color="default"
style={{ flex: 1 }}
/>
<i className="ti ti-volume-2" style={{ fontSize: 20, color: 'var(--color-text-primary)', flexShrink: 0 }} aria-hidden="true" />
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text-primary)', minWidth: 28, textAlign: 'right' }}>{volume}</span>
</div>

Slider props

RangeSlider props

Props / API

Api Props

Props

PropTypeDefaultDescription
valuenumber—Controlled value
defaultValuenumber0Uncontrolled initial value
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step between values
onChange(value: number) => void—Callback fired on value change
color'default' | 'secondary' | 'success' | 'warning' | 'error''default'Track and thumb color
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Height of the track
thumbStyle'default' | 'pill' | 'square' | 'bubble''default'Shape of the thumb
trackStyle'default' | 'glow' | 'gradient' | 'spectrum''default'Visual style of the filled track
orientation'horizontal' | 'vertical''horizontal'Direction of the slider
showLabelsbooleanfalseShows min and max labels
showTooltipbooleanfalseShows a tooltip above the thumb
showMarksbooleanfalseShows tick marks along the track
marks{ value: number; label?: string }[]—Custom mark positions and labels
showInputbooleanfalseShows a number input alongside the slider
formatValue(value: number) => string—Formats the tooltip / label value
disabledbooleanfalseDisables the slider
value[number, number]—Controlled range value
defaultValue[number, number][0, 100]Uncontrolled initial range
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step between values
onChange(value: [number, number]) => void—Callback fired on range change
color'default' | 'secondary' | 'success' | 'warning' | 'error''default'Track and thumb color
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Height of the track
showLabelsbooleanfalseShows min and max labels
showTooltipbooleanfalseShows tooltips above both thumbs
formatValue(value: number) => string—Formats the tooltip / label values
disabledbooleanfalseDisables the range slider