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>
  );
}