Slider

Forms 9

About

Adjusts one or more numeric values by moving labeled thumbs along a track.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slider to your project and fits it to your theme.

Code

How Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Slider, SliderWrapper, SliderRow, SliderOutput } from "@/components/ui/slider";

/** The demo brings its own 000h canvas, so it looks right on any host page (the component package sets nothing global). */
function DemoSurface({ children }: { children: import("react").ReactNode }) {
  return <div className="grid min-h-screen w-full place-items-center bg-[var(--v-canvas)] p-4 font-[family-name:var(--font-text)] text-[length:var(--fs-body)] leading-[var(--lh-body)] text-[var(--v-text)]">{children}</div>;
}

export default function Demo() {
  const [focus, setFocus] = React.useState([45]);
  const [tension, setTension] = React.useState([50]);
  const [range, setRange] = React.useState([20, 70]);
  const [cadence, setCadence] = React.useState([50]);
  return (
    <DemoSurface>
      <div className="mx-auto grid w-full max-w-md gap-9 p-8">
        <SliderWrapper>
          <SliderRow>
            <span className="text-sm font-medium text-[var(--v-text)]">Focus duration</span>
            <SliderOutput>{focus[0]} min</SliderOutput>
          </SliderRow>
          <Slider appearance="organic" value={focus} onValueChange={setFocus} max={90} step={5} thumbLabel="Focus duration" />
          <p className="text-sm text-[var(--v-text-2)]">Move with drag or arrow keys. The active control stretches in the direction you travel, then settles.</p>
        </SliderWrapper>
        <SliderWrapper>
          <SliderRow>
            <span className="text-sm font-medium text-[var(--v-text)]">Elastic tension</span>
            <SliderOutput>{tension[0]}%</SliderOutput>
          </SliderRow>
          <Slider appearance="rubber" value={tension} onValueChange={setTension} thumbLabel="Elastic tension" />
        </SliderWrapper>
        <SliderWrapper>
          <SliderRow>
            <span className="text-sm font-medium text-[var(--v-text)]">Working interval</span>
            <SliderOutput>
              {range[0]}–{range[1]}
            </SliderOutput>
          </SliderRow>
          <Slider
            appearance="organic"
            variant="pink"
            value={range}
            onValueChange={setRange}
            minStepsBetweenThumbs={5}
            thumbLabel={(index) => (index === 0 ? "Interval start" : "Interval end")}
          />
        </SliderWrapper>
        <SliderWrapper>
          <SliderRow>
            <span className="text-sm font-medium text-[var(--v-text)]">Review cadence</span>
            <SliderOutput>{cadence[0]}%</SliderOutput>
          </SliderRow>
          <Slider appearance="segmented" value={cadence} onValueChange={setCadence} min={0} max={100} step={25} thumbLabel="Review cadence" />
        </SliderWrapper>
      </div>
    </DemoSurface>
  );
}