Slider

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download slider -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Slider } from "@/components/ui/slider";
import * as React from "react";
export default function SliderExample() {
  const [value, setValue] = React.useState([50]);
  return (
    <Slider
      min={0} max={100} step={1} disabled={false}
      value={value}
      onValueChange={(next) => setValue(Array.isArray(next) ? next : [next])}
      className="w-72"
      aria-label="Preview value"
    />
  );
}

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Examples

Default

import { Slider } from "@/components/ui/slider";
<Slider
  defaultValue={[50]}
  max={100}
  step={1}
  className="w-[60%] min-w-[240px]"
  
/>;

Range

import { Slider } from "@/components/ui/slider";
<Slider
  defaultValue={[25, 75]}
  max={100}
  step={1}
  className="w-[60%] min-w-[240px]"
/>;

Steps

import { Slider } from "@/components/ui/slider";
<Slider
  defaultValue={[50]}
  max={100}
  step={10}
  className="w-[60%] min-w-[240px]"
/>;

Disabled

import { Slider } from "@/components/ui/slider";
<Slider
  defaultValue={[50]}
  max={100}
  step={1}
  disabled
  className="w-[60%] min-w-[240px]"
/>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

This component adds no props of its own to Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.