Slider

An accessible range input. Supports single value, range (two thumbs), steps, and formatting. Composes @base-ui/react Slider with full keyboard and touch support.

High-level wrapper

Single thumb with label and value display.

Volume

import { Slider } from "@brijbyte/agentic-ui/slider";
import "@brijbyte/agentic-ui/slider.css";

export default function HighLevelDemo() {
  return (
    <div style={{ width: 280 }}>
      <Slider defaultValue={40} label="Volume" showValue aria-label="Volume" />
    </div>
  );
}

Range slider

Pass an array as defaultValue to get two thumbs.

Price range

20 – 70

import { Slider } from "@brijbyte/agentic-ui/slider";
import "@brijbyte/agentic-ui/slider.css";

export default function RangeDemo() {
  return (
    <div style={{ width: 280 }}>
      <Slider defaultValue={[20, 70]} label="Price range" showValue />
    </div>
  );
}

Steps

Control granularity with step. Use format for display formatting.

Step: 10

Step: 0.1

0.0

import { Slider } from "@brijbyte/agentic-ui/slider";
import "@brijbyte/agentic-ui/slider.css";

export default function StepsDemo() {
  return (
    <div style={{ width: 280, display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
      <Slider defaultValue={0} min={0} max={100} step={10} label="Step: 10" showValue aria-label="Step size 10" />
      <Slider
        defaultValue={0}
        min={0}
        max={1}
        step={0.1}
        label="Step: 0.1"
        showValue
        format={{ minimumFractionDigits: 1 }}
        aria-label="Step size 0.1"
      />
    </div>
  );
}

Disabled

Disabled range

import { Slider } from "@brijbyte/agentic-ui/slider";
import "@brijbyte/agentic-ui/slider.css";

export default function DisabledDemo() {
  return (
    <div style={{ width: 280, display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
      <Slider defaultValue={60} label="Disabled" disabled aria-label="Disabled slider" />
      <Slider defaultValue={[20, 75]} label="Disabled range" disabled />
    </div>
  );
}

Composed

Use raw @base-ui/react Slider.Root with styled parts for full control.

Threshold

import { Slider as BaseSlider } from "@base-ui/react/slider";
import { SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderLabel, SliderValue } from "@brijbyte/agentic-ui/slider";
import "@brijbyte/agentic-ui/slider.css";

export default function ComposedDemo() {
  return (
    <div style={{ width: 280 }}>
      <BaseSlider.Root defaultValue={55} min={0} max={100}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--space-2)" }}>
          <SliderLabel>Threshold</SliderLabel>
          <SliderValue />
        </div>
        <SliderControl>
          <SliderTrack>
            <SliderIndicator />
            <SliderThumb aria-label="Threshold" />
          </SliderTrack>
        </SliderControl>
      </BaseSlider.Root>
    </div>
  );
}

API Reference

Slider

base-ui docs ↗

An accessible range input with full keyboard and touch support. Pass a
single number for a standard slider or an array for a range slider with
two thumbs. Supports steps, large steps (Page Up/Down), and
Intl.NumberFormat display formatting.

Prop	Type	Default
value	`number \| number[]`	—
Current value (controlled). Pass an array for range sliders.
defaultValue	`number \| number[]`	—
Initial value (uncontrolled). Pass an array for range sliders.
onValueChange	`((value: number \| number[], eventDetails: unknown) => void)`	—
Called on every value change while dragging.
onValueCommitted	`((value: number \| number[], eventDetails: unknown) => void)`	—
Called once when the user finishes dragging.
min	`number`	`0`
Minimum allowed value.
max	`number`	`100`
Maximum allowed value.
step	`number`	`1`
Step increment.
largeStep	`number`	`10`
Step used for Page Up / Page Down keyboard shortcuts.
disabled	`boolean`	—
Prevent interaction.
name	`string`	—
HTML name attribute for form submission.
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
Axis direction.
format	`NumberFormatOptions`	—
`Intl.NumberFormatOptions` for value display formatting.
label	`ReactNode`	—
Visible label rendered above the track.
showValue	`boolean`	`false`
Show the current value next to the label.
aria-label	`string`	—
Aria-label for single-thumb sliders without a visible label.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the SliderStyles object. Each key maps to a hashed CSS module class name at runtime.

controlheaderindicatorlabelrootthumbtrackvalue