Slider

계약

Overview

Machine-readable contract from Component Spec.

component: sliderexport: Sliderversion: 1attributes: data-refineui=slider

Anatomy

Part	data-refineui
root	slider

Variants

Axis	Values
size	sm, md

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Native
slider	input	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Slider } from "@refineui/react";

<Slider min={0} max={100} value={volume} onChange={setVolume} />

<Slider
  min={0}
  max={10}
  step={1}
  value={rating}
  onChange={setRating}
  size="md"
/>

API 레퍼런스

Prop	Default	Type	Description
value	—	number	제어형 값.
onChange	—	(value: number) => void	값 변경 시 이벤트 핸들러.
min	0	number	최솟값.
max	100	number	최댓값.
step	1	number	단계 증분.
size	"md"	"sm" | "md"	레일 두께: sm(2px) 또는 md(4px).
disabled	false	boolean	인터랙션을 비활성화합니다.