Aidimension Ui Slider

Component

About

Range slider primitive with thumbs

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

Code

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

Usage.tsx

import * as React from "react";
import { Slider } from "@/components/ui/ai-dimensie-slider";

const settings = { defaultValue: 50, max: 100, step: 1 };

export default function Demo({
  defaultValue = settings.defaultValue,
  max = settings.max,
  step = settings.step,
}: Partial<typeof settings>) {
  return (
    <div className="flex min-h-[200px] items-center justify-center bg-background p-8">
      <Slider defaultValue={[defaultValue]} max={max} step={step} className="w-[300px]" />
    </div>
  );
}