폼과 선택@neumorphism-ui/slider

Slider

Base UI Slider 기반으로 단일 값과 number[] range API를 제공합니다. 배열 항목 수만큼 thumb를 만들고 thumbLabels로 각 input의 이름을 지정하며, 가로·세로 방향과 controlled·uncontrolled 값을 지원합니다.

@neumorphism-ui/slider

Registry JSON

미리보기

가격 범위₩32K – ₩72K

세로 방향

설치

npx shadcn@latest add @neumorphism-ui/slider

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/slider @neumorphism-ui/label

Import

import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-3">
  <div className="flex justify-between">
    <Label id="depth-label">Depth intensity</Label>
    <output>64%</output>
  </div>
  <Slider
    defaultValue={[64]}
    min={0}
    max={100}
    step={1}
    aria-labelledby="depth-label"
    thumbLabels={["Depth intensity"]}
  />
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Slider`	`value / defaultValue`	`number[]`	`[min]`	thumb별 controlled 또는 초기 uncontrolled 값입니다.
`Slider`	`min / max`	`number`	`0 / 100`	선택 가능한 숫자 범위입니다.
`Slider`	`step`	`number`	`1`	키보드와 포인터 조정 단위입니다.
`Slider`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	track 방향과 키보드 축을 설정합니다.
`Slider`	`thumbLabels`	`readonly string[]`	`—`	값 순서대로 실제 thumb input에 전달할 접근 가능한 이름입니다.
`Slider`	`onValueChange / onValueCommitted`	`(value: number \| number[]) => void`	`—`	조정 중 또는 조정이 끝났을 때 배열 값을 전달합니다.
`Slider`	`disabled`	`boolean`	`false`	모든 thumb의 상호작용을 비활성화합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성