reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Slider
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Slider

Component

Select a value with a native range input, normalized bounds and ARIA state, and configurable value formatting.

input
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Slider } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

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

PropTypeDefaultDescription
valuenumber—제어 모드 값
defaultValuenumber0비제어 모드 초기값
onChange(value: number) => void—값 변경 핸들러
onValueCommit(value: number) => void—포인터·키보드 편집 완료 시 한 번 호출. 취소와 외부 값 갱신은 제외
minnumber0최솟값
maxnumber100최댓값
stepnumber1증감 단위
labelstring—레이블 텍스트
showValuebooleanfalse현재 값 표시 여부
formatValue(value: number) => string—값 포맷 함수
disabledboolean—비활성화
classNamestring—최외곽 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

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Combobox

Core

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Switch

Core

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

PreviousNumberInputNextPageHeader