Controls & Inputs

Spring Slider

탄성 있는 초과 움직임과 스프링 움직임을 가진 슬라이더입니다.

Preview

action control

Spring Slider

drag the stepped handle

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/elastic-slider.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/elastic-slider.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/elastic-slider.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/elastic-slider.json

typescript

Copied

1import { ElasticSlider } from "@/components/elastic-slider"23export default function Example() {4  return <ElasticSlider defaultValue={45} />5}

Prop	Type	Default	Description
defaultValue	number	50	Initial slider value.
startingValue	number	0	Minimum value.
maxValue	number	100	Maximum value.
isStepped	boolean	false	Whether to snap to steps.
stepSize	number	1	Value increment when stepped.
leftIcon	React.ReactNode	-	Optional left icon.
rightIcon	React.ReactNode	-	Optional right icon.