Skip to Content
UIComponents

Zoom Slider

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

Installation

Make sure to follow the prerequisites before installing the component.

npx shadcn@latest add https://ui-components-git-zoom-vertical-2-xyflow.vercel.app/zoom-slider

Usage

1. Connect the component with your React Flow application.

import { Background, Panel, ReactFlow } from "@xyflow/react"; import { ZoomSlider } from "@/registry/components/zoom-slider/"; import { Button } from "@/components/ui/button"; import { useState } from "react"; const defaultNodes = [ { id: "1", position: { x: 200, y: 200 }, data: { label: "Node" }, }, ]; export default function App() { const [orientation, setOrientation] = useState<"horizontal" | "vertical">( "horizontal", ); return ( <div className="h-full w-full"> <ReactFlow defaultNodes={defaultNodes} fitView> <Background /> <ZoomSlider position="top-left" orientation={orientation} /> <Panel position="bottom-right"> <Button onClick={() => setOrientation( orientation === "horizontal" ? "vertical" : "horizontal", ) } > Toggle orientation </Button> </Panel> </ReactFlow> </div> ); }
Last updated on