Slider

사용자가 지정된 범위 안에서 값을 선택하는 입력 컴포넌트입니다.

examples/krds/slider-demo.tsx

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

export function SliderDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/slider.json

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

<Slider defaultValue={[33]} max={100} step={1} />

Use an array with two values for a range slider.

examples/krds/slider-range.tsx

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

export function SliderRange() {

Use an array with multiple values for multiple thumbs.

examples/krds/slider-multiple.tsx

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

export function SliderMultiple() {

Use orientation="vertical" for a vertical slider.

examples/krds/slider-vertical.tsx

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

export function SliderVertical() {

Temperature0.3, 0.7

examples/krds/slider-controlled.tsx

"use client"

import * as React from "react"

disabled prop으로 Slider를 비활성화합니다.

examples/krds/slider-disabled.tsx

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

export function SliderDisabled() {

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/slider-rtl.tsx

"use client"

import * as React from "react"

Radix UI Slider 문서를 참고하세요.