Slider

v1.1.0

단일 값 또는 범위 모드를 지원하는 숫자 값 선택용 슬라이더 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Slider } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

볼륨

밝기

가격 범위:

$20 - $80

가격 범위

default

primary

success

warning

danger

Normal

Disabled

이름	타입	기본값	설명
`variant`	`"default" \| "primary" \| "success" \| "warning" \| "danger"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	슬라이더 크기
`value`	`number \| number[]`	`0`	현재 값 (배열이면 범위 슬라이더)
`onValueChange`	`(value: number \| number[]) => void`	-	Callback when value changes
`min`	`number`	`0`	최소값
`max`	`number`	`100`	최대값
`step`	`number`	`1`	단계 증가량
`showValue`	`boolean`	`false`	Display current value
`showLabel`	`boolean`	`false`	Display label
`label`	`string`	-	슬라이더 레이블
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	슬라이더 방향
`disabled`	`boolean`	`false`	슬라이더 비활성화
`dot`	`string`	-
`style`	`React.CSSProperties`	-

기본 사용법

import { Slider } from '@hua-labs/ui/form';

<Slider />

제어 모드

const [value, setValue] = useState(50);

<Slider
  value={value}
  onValueChange={setValue}
  showValue
  label="Volume"
  showLabel
/>

범위 슬라이더

const [range, setRange] = useState([20, 80]);

<Slider
  value={range}
  onValueChange={setRange}
  showValue
  label="Price Range"
  showLabel
/>