Slider

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

Fluid Functionalismbymicka_design

"use client";

import { useState } from "react";
import { Slider } from "../components/ui/slider";

export default function SliderDemo() {
  const [value, setValue] = useState(40);
  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)} />
      </div>
    </div>
  );
}