Slider

Install

Pull Slider from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { Slider } from "@brika/clay";

import { Slider } from "@brika/clay/components/slider";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import { Slider, SliderValue } from '@brika/clay/components/slider';
import { useState } from 'react';
export default function SliderDefaultDemo() {
  const [value, setValue] = useState(50);
  return (
    <div className="flex w-full max-w-xs items-center gap-2">
      <Slider value={value} onChange={setValue} min={0} max={100} step={1} className="flex-1" />
      <SliderValue value={value} onChange={setValue} min={0} max={100} step={1} unit="%" />
    </div>
  );
}

Slider, every way

import { Slider } from '@brika/clay/components/slider';
import { useState } from 'react';
const PRESET_TICKS = [1, 3, 6, 12] as const;

export default function SliderCustomTicksDemo() {
  const [value, setValue] = useState(3);
  return (
    <div className="w-full max-w-xs">
      <Slider
        value={value}
        onChange={setValue}
        min={0}
        max={12}
        step={1}
        ticks={PRESET_TICKS}
        tickLabels={(t) => `${t}mo`}
      />
    </div>
  );
}

import { Slider } from '@brika/clay/components/slider';
import { useState } from 'react';
export default function SliderStepDotsDemo() {
  const [value, setValue] = useState(4);
  return (
    <div className="w-full max-w-xs">
      <Slider value={value} onChange={setValue} min={0} max={10} step={1} ticks tickLabels />
    </div>
  );
}

import { Slider } from '@brika/clay/components/slider';
import { useState } from 'react';
export default function SliderStepIntervalDemo() {
  const [value, setValue] = useState(6);
  return (
    <div className="w-full max-w-xs">
      <Slider value={value} onChange={setValue} min={0} max={20} step={1} ticks={2} tickLabels />
    </div>
  );
}

Accessibility

• › Built on a native <input type="range">, all keyboard and AT semantics are native.
• › Arrow keys adjust value by step; Home/End jump to min/max.
• › Always provide a visible label linked via htmlFor or wrapped <label>.
• › SliderValue pairing gives a numeric readout, include unit for percentage or currency.

Theme tokens

Every CSS variable Slider reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Slider without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.slider, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "slider": {
      "radius": "9999px"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-slider-…) — see the chips on each token row.

API reference

Props specific to Slider. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.