Slider

Component 1

About

A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

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 { useState } from "react";
import { Slider } from "../components/ui/slider";

export default function SliderValueRightDemo() {
  const [value, setValue] = useState(75);
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <div style={{ width: "700px", maxWidth: "90vw" }}>
        <Slider
          value={value}
          onChange={(v) => setValue(v as number)}
          valuePosition="right"
          label="Opacity"
          formatValue={(v) => `${v}%`}
        />
      </div>
    </div>
  );
}