Slider

Component

범위 슬라이더 입력. native range input 래핑, 범위로 정규화된 값/ARIA 상태, 값 표시와 포맷 함수를 지원합니다.

input

Related docs

bun add @reopt-ai/opt-ui

100%

Basic

밝기75

대비50

Min / Max / Step

온도22°C

배율100%

Controlled

볼륨50%

현재 값: 50

Commit expensive changes

Replay position0s

Last completed seek: 0s

Disabled

비활성30

Slider

Prop	Type	Default	Description
value	number	—	제어 모드 값
defaultValue	number	0	비제어 모드 초기값
onChange	(value: number) => void	—	값 변경 핸들러
onValueCommit	(value: number) => void	—	포인터·키보드 편집 완료 시 한 번 호출. 취소와 외부 값 갱신은 제외
min	number	0	최솟값
max	number	100	최댓값
step	number	1	증감 단위
label	string	—	레이블 텍스트
showValue	boolean	false	현재 값 표시 여부
formatValue	(value: number) => string	—	값 포맷 함수
disabled	boolean	—	비활성화
className	string	—	최외곽 CSS 클래스

View test results

테스트 커버리지

2026년 7월 9일10/10 통과

10성공

0실패

10전체

기본값으로 렌더링한다
label이 없어도 기본 접근성 이름을 제공한다
onChange를 호출한다
min/max/step을 적용한다
disabled 상태를 지원한다
formatValue로 표시값을 포맷한다
범위를 벗어난 값을 표시값과 aria 값에서 클램프한다
max와 min이 같아도 NaN gradient나 라벨을 노출하지 않는다
비정상 숫자와 잘못된 step을 안전한 값으로 정규화한다
onChange는 정규화된 값을 전달한다

Related components

Select

Input

Combobox

Input

Button

Input

Switch

Input

Textarea

Input

Slider

Component

범위 슬라이더 입력. native range input 래핑, 범위로 정규화된 값/ARIA 상태, 값 표시와 포맷 함수를 지원합니다.

input

Related docs

bun add @reopt-ai/opt-ui

100%

Basic

밝기75

대비50

Min / Max / Step

온도22°C

배율100%

Controlled

볼륨50%

현재 값: 50

Commit expensive changes

Replay position0s

Last completed seek: 0s

Disabled

비활성30

Slider

Prop	Type	Default	Description
value	number	—	제어 모드 값
defaultValue	number	0	비제어 모드 초기값
onChange	(value: number) => void	—	값 변경 핸들러
onValueCommit	(value: number) => void	—	포인터·키보드 편집 완료 시 한 번 호출. 취소와 외부 값 갱신은 제외
min	number	0	최솟값
max	number	100	최댓값
step	number	1	증감 단위
label	string	—	레이블 텍스트
showValue	boolean	false	현재 값 표시 여부
formatValue	(value: number) => string	—	값 포맷 함수
disabled	boolean	—	비활성화
className	string	—	최외곽 CSS 클래스

View test results

테스트 커버리지

2026년 7월 9일10/10 통과

10성공

0실패

10전체

기본값으로 렌더링한다
label이 없어도 기본 접근성 이름을 제공한다
onChange를 호출한다
min/max/step을 적용한다
disabled 상태를 지원한다
formatValue로 표시값을 포맷한다
범위를 벗어난 값을 표시값과 aria 값에서 클램프한다
max와 min이 같아도 NaN gradient나 라벨을 노출하지 않는다
비정상 숫자와 잘못된 step을 안전한 값으로 정규화한다
onChange는 정규화된 값을 전달한다

Related components

Select

Input

Combobox

Input

Button

Input

Switch

Input

Textarea

Input

Slider

Basic

Min / Max / Step

Controlled

Commit expensive changes

Disabled

Slider

테스트 커버리지

Related components

Select

Combobox

Button

Input

Switch

Textarea

Slider

Basic

Min / Max / Step

Controlled

Commit expensive changes

Disabled

Slider

테스트 커버리지

Related components

Select

Combobox

Button

Input

Switch

Textarea

기본 사용

여러 Select

다중 선택

기본 사용

그룹화

Variants

Sizes

States

Loading & Disabled

With Icons

Basic

With Hint

Error State

With Icons

Basic

Sizes

Disabled

Without Label

Basic

With Hint

Error State

Resize Options