Slider — 단일값과 범위를 구분하는 controlled Slider

단일 숫자와 두 thumb 범위를 타입으로 분리하고 키보드·접근성 액션·RTL 좌표를 지원하는 무의존 Expo·React Native Slider입니다.

v0.4.0 공개 예정

이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.

Slider 사용 시점과 역할

Slider는 수치의 정본을 앱에 두는 horizontal controlled 입력입니다. single은 number, range는 readonly [number, number]과 두 개의 접근성 이름을 요구합니다. step grid, minDistance와 범위 제약을 렌더 전에 검증하고 track press·drag·웹 키보드와 네이티브 adjustable 액션은 변경 중 값과 정확히 한 번의 commit을 분리해 전달합니다.

single number와 range tuple을 구분하는 onValueChange·onValueCommit 타입 계약
track press와 PanResponder drag, 웹 Arrow·Page·Home·End 및 native increment·decrement
direction ltr·rtl, 44px thumb target, track·range·thumb별 style·className

설치와 최소 예제

Slider: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.

TypeScript

pnpm add @gj-kit/expo-ui

import { Slider } from '@gj-kit/expo-ui';

<Slider value={volume} min={0} max={100} step={5} accessibilityLabel="알림 음량" onValueChange={setVolume} onValueCommit={saveVolume} />

접근성과 플랫폼 동작

각 thumb는 필수 접근성 이름과 adjustable/slider 역할, 현재 값·동적 최소·최대 값을 제공합니다. range thumb는 반대 thumb와 minDistance를 반영한 접근성 범위를 노출하며, disabled면 포커스·키보드·접근성 액션을 모두 막습니다.

기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.

함께 사용하는 컴포넌트

Slider — 단일값과 범위를 구분하는 controlled Slider

Slider 사용 시점과 역할

설치와 최소 예제

접근성과 플랫폼 동작

함께 사용하는 컴포넌트

RadioGroup

ProgressBar

ToggleGroup