codefast/ui

Command Palette

Search for a command to run...

Source
Form

Slider

Range input with keyboard support. Supports min, max, step, and multiple thumbs.

Examples

Range (two thumbs)

Pass an array of two values to get a min–max range, e.g. a price filter.

5 lines
import { Slider } from "@codefast/ui/slider";

export function SliderRange() {
  return <Slider defaultValue={[25, 50]} max={100} step={5} className="mx-auto w-full max-w-xs" />;
}

Controlled

An input where the user selects a value from within a given range.

0.3, 0.7
17 lines
import { Label } from "@codefast/ui/label";
import { Slider } from "@codefast/ui/slider";
import * as React from "react";

export function SliderControlled() {
  const [value, setValue] = React.useState([0.3, 0.7]);

  return (
    <div className="mx-auto grid w-full max-w-xs gap-3">
      <div className="flex items-center justify-between gap-2">
        <Label htmlFor="slider-demo-temperature">Temperature</Label>
        <span className="text-sm text-muted-foreground">{value.join(", ")}</span>
      </div>
      <Slider id="slider-demo-temperature" value={value} onValueChange={setValue} min={0} max={1} step={0.1} />
    </div>
  );
}

Disabled

Use the disabled prop to disable the slider.

5 lines
import { Slider } from "@codefast/ui/slider";

export function SliderDisabled() {
  return <Slider defaultValue={[50]} max={100} step={1} disabled className="mx-auto w-full max-w-xs" />;
}

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

5 lines
import { Slider } from "@codefast/ui/slider";

export function SliderMultiple() {
  return <Slider defaultValue={[10, 20, 70]} max={100} step={10} className="mx-auto w-full max-w-xs" />;
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

25 lines
import { Slider } from "@codefast/ui/slider";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
};

export function SliderRtl() {
  const { dir } = useTranslation(translations, "ar");

  return <Slider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" dir={dir} />;
}

Vertical

Use orientation='vertical' for a vertical slider.

10 lines
import { Slider } from "@codefast/ui/slider";

export function SliderVertical() {
  return (
    <div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
      <Slider defaultValue={[50]} max={100} step={1} orientation="vertical" className="h-40" />
      <Slider defaultValue={[25]} max={100} step={1} orientation="vertical" className="h-40" />
    </div>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

5 lines
import { Slider } from "@codefast/ui/slider";

export function SliderUsage() {
  return <Slider defaultValue={[50]} max={100} step={1} />;
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Slider

Features

  • Thumb count follows value/defaultValue length — one number for a single slider, two for a min–max range, more for multi-thumb.
  • orientation="vertical" flips the track and thumb layout into a column.
  • Each thumb gets aria-valuenow/valuemin/valuemax automatically from Radix Slider.

API reference

Props for each part of the component. All native element props are also forwarded.

Slider

Built on Radix Slider. The number of thumbs follows the length of value.

valuenumber[]

The controlled thumb positions. Two entries render a range.

defaultValuenumber[]

The thumb positions when initially rendered (uncontrolled).

onValueChange(value: number[]) => void

Called when any thumb position changes.

minnumber

The lower bound of the track.

Default0

maxnumber

The upper bound of the track.

Default100

stepnumber

Granularity the thumb snaps to.

Default1

orientation"horizontal" | "vertical"

Axis of the slider.

Default"horizontal"

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

KeyFunction
TabMoves focus between thumbs.
Arrow+RightIncreases the focused thumb by one step.
Arrow+LeftDecreases the focused thumb by one step.
HomeSets the thumb to its minimum.
EndSets the thumb to its maximum.
  • Each thumb is a slider role with aria-valuenow / valuemin / valuemax set automatically.
  • Give the Slider an aria-label (or aria-labelledby) so the purpose is announced.
  • Pair with a visible readout so the current value is not conveyed by position alone.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Show the current value (or range) near the slider.
  • Pick a step that matches the precision users actually need.

Don’t

  • Don’t use a slider for precise numeric entry — use Input Number.
  • Don’t hide which thumb is which in a range without labels or a readout.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components