Slider

범위 내에서 값을 선택하는 슬라이더 컴포넌트입니다. Radix UI Slider 기반.

Installation

bash

npx axis-cli add slider

tsx

import { Slider } from '@axis-ds/ui-react'

export function Example() {
  return <Slider defaultValue={[50]} max={100} step={1} />
}

Prop	Type	Default	Description
`value`	`number[]`	-	현재 값 (controlled)
`defaultValue`	`number[]`	[0]	기본 값
`onValueChange`	`(value: number[]) => void`	-	값 변경 콜백
`onValueCommit`	`(value: number[]) => void`	-	드래그 종료 시 콜백
`min`	`number`	0	최소값
`max`	`number`	100	최대값
`step`	`number`	1	단계 값
`disabled`	`boolean`	false	비활성화 여부
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	슬라이더 방향

value

Type:number[]

Default:-

현재 값 (controlled)

defaultValue

Type:number[]

Default:[0]

기본 값

onValueChange

Type:(value: number[]) => void

Default:-

값 변경 콜백

onValueCommit

Type:(value: number[]) => void

Default:-

드래그 종료 시 콜백

min

Type:number

Default:0

최소값

max

Type:number

Default:100

최대값

step

Type:number

Default:1

단계 값

disabled

Type:boolean

Default:false

비활성화 여부

orientation

Type:"horizontal" | "vertical"

Default:"horizontal"

슬라이더 방향

Radix UI Slider 기반으로 WAI-ARIA Slider 패턴을 따릅니다.