Component

Slider

연속적인 값이나 범위의 시작·끝을 선택하는 컨트롤입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

같은 size의 입력 필드에 맞춘 트랙과 핸들 크기

Code

import { type ControlSize, Slider } from '@amineslab/ui'

import { useState } from 'react'

function SliderExample({ size = 'md' }: {
    size?: ControlSize;
}) {
    const [value, setValue] = useState([40]);
    return (<div className="grid gap-2">
      <Slider size={size} value={value} onValueChange={setValue} aria-label="불투명도"/>
    </div>);
}

export default function ExamplePreview() {
  return (<SliderExample size={"md"}/>)
}

Props

@amineslab/ui에서 Slider, sliderTrackVariants를 가져옵니다.

import { Slider, sliderTrackVariants } from '@amineslab/ui'

`Slider`

Radix slider props를 전달하는 값 범위 컨트롤입니다.

Name	Type	Default	Description
`value`	`number[]`	-	controlled 값 배열입니다.
`defaultValue`	`number[]`	-	uncontrolled 초기값 배열입니다.
`onValueChange`	`(value: number[]) => void`	-	드래그 중 값을 전달합니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	트랙과 Thumb 크기를 정합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

단일값과 범위값을 같은 Root로 처리합니다.
Thumb에는 키보드 증감과 focus ring이 제공되고, coarse pointer에서는 충분한 터치 타깃을 확보합니다.
불연속 라벨이 필요하면 SteppedSlider를 사용하세요.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow Left / Right: step만큼 값을 조절합니다.
Home / End: 최솟값·최댓값으로 이동합니다.