Component

SteppedSlider

라벨과 틱을 가진 불연속 슬라이더입니다.

Playground

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

PC 1280px

Controls

Code

import { useState } from 'react'

import { SteppedSlider } from '@amineslab/ui'

function SteppedSliderExample({ value: initialValue = 16 } = {}) {
    const options = [
        { value: 12, label: '12px' },
        { value: 14, label: '14px' },
        { value: 16, label: '16px' },
        { value: 18, label: '18px' },
    ];
    const [value, setValue] = useState(initialValue);
    return (<SteppedSlider options={options} value={value} onValueChange={setValue} startAdornment="가" endAdornment="가" aria-label="본문 크기"/>);
}

export default function ExamplePreview() {
  return (<SteppedSliderExample key={16} {...({"value":16} as const)}/>)
}

Props

@amineslab/ui에서 SteppedSlider를 가져옵니다.

import { SteppedSlider } from '@amineslab/ui'

`SteppedSlider`

실제 숫자값과 표시 라벨을 매핑합니다.

Name	Type	Default	Description
`options*`	`readonly SteppedSliderOption[]`	-	선택 가능한 값과 라벨입니다.
`value*`	`number`	-	현재 선택된 실제 값입니다.
`onValueChange*`	`(value: number) => void`	-	스텝이 바뀔 때 호출합니다.
`startAdornment`	`ReactNode`	-	트랙 왼쪽 크기 힌트입니다.
`endAdornment`	`ReactNode`	-	트랙 오른쪽 크기 힌트입니다.

Examples

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

사용 기준

권장하는 사용

options의 순서가 왼쪽에서 오른쪽 순서가 됩니다.
트랙을 드래그하거나 Thumb를 키보드로 움직일 수 있고, 라벨은 직접 눌러 해당 값으로 이동할 수 있어 작은 화면에서도 선택 지점을 파악하기 쉽습니다.

피해야 할 사용

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

접근성

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

Arrow Left / Right: 이전·다음 스텝으로 이동합니다.
Home / End: 첫·마지막 스텝으로 이동합니다.