Zoom Slider

A zoom control that lets you zoom in and out seamlessly using a slider.

Dependencies:

@xyflow/react lucide-react shadcn/ui/button shadcn/ui/slider

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/zoom-slider


pnpm dlx shadcn@latest add https://ui.reactflow.dev/zoom-slider


yarn dlx shadcn@latest add https://ui.reactflow.dev/zoom-slider


bun x shadcn@latest add https://ui.reactflow.dev/zoom-slider

Usage

1. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import { ZoomSlider } from "@/registry/components/zoom-slider/";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} fitView>
        <Background />
        <ZoomSlider position="top-left" />
      </ReactFlow>
    </div>
  );
}