Iso Slider

Forms 1

About

A draggable range slider whose thumb renders as a small isometric cube that sinks into its track when pressed, with optional tick marks along the rail.

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

Code

How Iso 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 { IsoSlider } from "@/components/ui/iso-slider";

export default function IsoSliderDemo() {
  const [value, setValue] = React.useState([40]);

  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm space-y-10">
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">Volume: {value[0]}</p>
          <IsoSlider
            value={value}
            onValueChange={setValue}
            min={0}
            max={100}
            step={1}
          />
        </div>
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">With ticks</p>
          <IsoSlider
            defaultValue={[20, 70]}
            min={0}
            max={100}
            step={10}
            ticks
          />
        </div>
      </div>
    </div>
  );
}