Slider
포인터나 키보드로 일정 간격의 숫자 하나를 조절합니다.
용법
하나만 선택 값
포인터나 키보드로 하나의 가로 값을 선택합니다.
<!-- Slider / Single Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>세로 방향 값
포인터나 키보드로 하나의 세로 값을 선택합니다.
<!-- Slider / Vertical Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>부모가 관리하는 값
포인터와 키보드 입력은 변경을 요청하고 실제 슬라이더 값은 부모가 관리합니다.
<!-- Slider / Controlled Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>API
Vue 패키지: @sectile/vue/slider
SliderRootSliderTrackSliderRangeSliderThumb
Props
SliderRootProps
as- 타입
PrimitiveAs기본값'div'이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild- 타입
boolean기본값false하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue- 타입
number | string기본값0컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled- 타입
boolean기본값false사용자 조작을 막을지 여부입니다.
form- 타입
string기본값undefined컨트롤을 연결할 네이티브 form 요소의 ID입니다.
formatValue- 타입
(value: string) => string기본값undefined값을 화면에 표시할 문자열로 바꾸는 함수입니다.
label- 타입
string기본값undefined보조 기술이 읽는 컨트롤 이름입니다.
max- 타입
number | string기본값100컴포넌트가 받을 수 있는 최댓값입니다.
min- 타입
number | string기본값0컴포넌트가 받을 수 있는 최솟값입니다.
modelValue- 타입
number | string기본값undefined부모가 상태를 관리할 때 사용할 현재 값입니다.
name- 타입
string기본값undefined네이티브 폼 제출에 사용할 이름입니다.
orientation- 타입
'horizontal' | 'vertical'기본값'horizontal'배치와 키보드 이동에 사용할 축입니다.
pageStep- 타입
number기본값10Page Up과 Page Down이 사용할 큰 증감 간격입니다.
readonly- 타입
boolean기본값false값 확인만 허용하는 읽기 전용 상태 여부입니다.
required- 타입
boolean기본값false제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
role- 타입
'slider' | 'separator'기본값'slider'렌더링된 컨트롤에 적용할 ARIA 역할입니다.
step- 타입
number | string기본값1컴포넌트가 받을 수 있는 최소 증감 간격입니다.
SliderPartProps
as- 타입
PrimitiveAs기본값파트별로 다름이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild- 타입
boolean기본값false하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
슬롯
SliderSlotProps
disabled- 타입
boolean사용자 조작을 막을지 여부입니다.
percentage- 타입
number현재 값을 범위의 백분율로 나타낸 값입니다.
readonly- 타입
boolean값 확인만 허용하는 읽기 전용 상태 여부입니다.
value- 타입
string이 계약이 노출하는 현재 값입니다.
이벤트
SliderRoot
update:modelValue- 페이로드
string컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
SliderValueFormatter
type SliderValueFormatter = NonNullable<SliderRootProps['formatValue']>SliderValueChangeHandler
type SliderValueChangeHandler = (value: string) => void파트
공통 범위: [data-scope="slider"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
track | [data-part="track"] | 하나 이상의 핸들이 이동하는 측정 경로입니다. | — |
range | [data-part="range"] | 트랙 위의 활성 범위를 표시합니다. | — |
thumb | [data-part="thumb"] | 트랙 위의 값 하나를 조절합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Right / Arrow Up | 값을 한 단계 증가시킵니다. |
| Arrow Left / Arrow Down | 값을 한 단계 감소시킵니다. |
| Home / End | 최솟값 또는 최댓값으로 이동합니다. |
| Page Up / Page Down | 지원되는 경우 설정된 큰 단계만큼 값을 바꿉니다. |
접근성
핸들이 이름, 최솟값, 최댓값, 현재 값, 방향, 상호작용 상태를 노출합니다.
관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.