Slider — Design System

In context

Notification volume with track labels, two-thumb price-range filter, anomaly-threshold with tone Badge, and a live image-filter chain.

Notification volume

Single-thumb slider with min/max track labels.

62%

Sensible default for most teams.

Price filter

Two-thumb range with formatted currency labels.

$40 – $180per seat / month

84 plans match this range.

Anomaly threshold

Medium

Tone Badge driven by the active value.

70%

Trigger pager-duty when anomaly score crosses 70%.

Image adjustments

Three sliders driving a live filter chain.

Brightness100%

Contrast100%

Saturate100%

Default

A single-thumb slider for continuous values. The thumb snaps to the nearest step.

import { Slider } from '@mihcm/ui/Slider';
 
<Slider defaultValue={[50]} max={100} step={1} />

Sizes

<div className="space-y-6 w-64">
  <Slider defaultValue={[30]} size="sm" />
  <Slider defaultValue={[50]} size="md" />
  <Slider defaultValue={[70]} size="lg" />
</div>

Range (dual thumb)

Pass two values to create a range slider. Useful for price filters or min/max constraints.

<Slider defaultValue={[25, 75]} max={100} step={5} />

With label

Pair with a visible label and current value for precise feedback.

Volume50%

import { useState } from 'react';
import { Slider } from '@mihcm/ui/Slider';
 
const [value, setValue] = useState([50]);
 
<div className="space-y-2 w-64">
  <div className="flex justify-between text-sm">
    <label>Volume</label>
    <span className="text-muted-foreground">{value[0]}%</span>
  </div>
  <Slider value={value} onValueChange={setValue} max={100} step={1} />
</div>

Disabled

<Slider defaultValue={[50]} disabled className="opacity-50" />

Custom step

<Slider defaultValue={[0]} min={0} max={1000} step={100} />