Multi Thumb Slider

하나의 수치 트랙에서 순서가 있는 여러 값을 조절합니다.

용법

핸들 두 개로 고르는 범위

핸들 두 개로 범위의 최솟값과 최댓값을 고릅니다.

Campaign budgetChoose the monthly spend range$120 – $340

$120$340

$50 · Minimum$275 · Typical$500 · Maximum

Drag a handle or use the arrow keys for precise steps.

<!-- Multi Thumb Slider / Two Thumb Range -->
<script setup lang="ts">
import { ref } from 'vue'
import { MultiThumbSliderRange, MultiThumbSliderRoot, MultiThumbSliderThumb, MultiThumbSliderTrack } from '@sectile/vue/multi-thumb-slider'

const thumbs = ['minimum', 'maximum']
const values = ref(['120', '340'])
</script>

<template>
  <MultiThumbSliderRoot v-model="values" :thumbs="thumbs" min="50" max="500" step="10">
    <MultiThumbSliderTrack>
      <MultiThumbSliderRange />
      <MultiThumbSliderThumb v-for="thumb in thumbs" :key="thumb" :value="thumb" />
    </MultiThumbSliderTrack>
    <output>{{ values.join(' – ') }}</output>
  </MultiThumbSliderRoot>
</template>

핸들 세 개로 나누는 구간

핸들 세 개로 하나의 수치 범위를 의미 있는 구간으로 나눕니다.

Release quality gatesSet warning, review, and blocking thresholds20% · 55% · 85%

20%55%85%

0% · Open50% · Review100% · Block

Drag a handle or use the arrow keys for precise steps.

<!-- Multi Thumb Slider / Three Thumb Thresholds -->
<script setup lang="ts">
import { ref } from 'vue'
import { MultiThumbSliderRange, MultiThumbSliderRoot, MultiThumbSliderThumb, MultiThumbSliderTrack } from '@sectile/vue/multi-thumb-slider'

const thumbs = ['warning', 'review', 'block']
const values = ref(['20', '55', '85'])
</script>

<template>
  <MultiThumbSliderRoot v-model="values" :thumbs="thumbs" min="0" max="100" step="5">
    <MultiThumbSliderTrack>
      <MultiThumbSliderRange />
      <MultiThumbSliderThumb v-for="thumb in thumbs" :key="thumb" :value="thumb" />
    </MultiThumbSliderTrack>
    <output>{{ values.join(' – ') }}</output>
  </MultiThumbSliderRoot>
</template>

핸들 교차 여러 핸들

설정한 규칙에 따라 핸들 교차를 막거나 값의 순서를 정리합니다.

Search price rangeKeep at least $10 between both limits$35 – $70

$35$70

$0 · Minimum$50 · Typical$100 · Maximum

Drag a handle or use the arrow keys for precise steps.

<!-- Multi Thumb Slider / Crossing Thumbs -->
<script setup lang="ts">
import { ref } from 'vue'
import { MultiThumbSliderRange, MultiThumbSliderRoot, MultiThumbSliderThumb, MultiThumbSliderTrack } from '@sectile/vue/multi-thumb-slider'

const thumbs = ['minimum', 'maximum']
const values = ref(['35', '70'])
</script>

<template>
  <MultiThumbSliderRoot v-model="values" :thumbs="thumbs" min="0" max="100" step="5" :policies="{ minGap: 2 }">
    <MultiThumbSliderTrack>
      <MultiThumbSliderRange />
      <MultiThumbSliderThumb v-for="thumb in thumbs" :key="thumb" :value="thumb" />
    </MultiThumbSliderTrack>
    <output>{{ values.join(' – ') }}</output>
  </MultiThumbSliderRoot>
</template>

부모가 관리하는 범위

범위를 이루는 모든 핸들의 값을 부모가 관리합니다.

Campaign budgetChoose the monthly spend range$120 – $340

$120$340

$50 · Minimum$275 · Typical$500 · Maximum

Drag a handle or use the arrow keys for precise steps.

<!-- Multi Thumb Slider / Controlled Range -->
<script setup lang="ts">
import { ref } from 'vue'
import { MultiThumbSliderRange, MultiThumbSliderRoot, MultiThumbSliderThumb, MultiThumbSliderTrack } from '@sectile/vue/multi-thumb-slider'

const thumbs = ['minimum', 'maximum']
const values = ref(['120', '340'])
</script>

<template>
  <MultiThumbSliderRoot v-model="values" :thumbs="thumbs" min="50" max="500" step="10">
    <MultiThumbSliderTrack>
      <MultiThumbSliderRange />
      <MultiThumbSliderThumb v-for="thumb in thumbs" :key="thumb" :value="thumb" />
    </MultiThumbSliderTrack>
    <output>{{ values.join(' – ') }}</output>
  </MultiThumbSliderRoot>
</template>

API

Vue 패키지: @sectile/vue/multi-thumb-slider

컴포넌트

MultiThumbSliderRoot
MultiThumbSliderTrack
MultiThumbSliderRange
MultiThumbSliderThumb

Props

`MultiThumbSliderRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue: 타입readonly (number | string)[]기본값undefined
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
formatValue: 타입(value: string, id: string) => string기본값undefined
값을 화면에 표시할 문자열로 바꾸는 함수입니다.
getThumbLabel: 타입(id: string) => string기본값undefined
슬라이더 핸들의 접근 가능한 이름을 반환하는 함수입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
max: 타입number | string기본값100
컴포넌트가 받을 수 있는 최댓값입니다.
min: 타입number | string기본값0
컴포넌트가 받을 수 있는 최솟값입니다.
modelValue: 타입readonly (number | string)[]기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
orientation: 타입'horizontal' | 'vertical'기본값'horizontal'
배치와 키보드 이동에 사용할 축입니다.
policies: 타입MultiThumbSliderPolicies기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
step: 타입number | string기본값1
컴포넌트가 받을 수 있는 최소 증감 간격입니다.
thumbs: 타입readonly string[]기본값필수
순서 있는 슬라이더 핸들 정의입니다.

`MultiThumbSliderThumbProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
value: 타입string기본값필수
이 계약이 노출하는 현재 값입니다.

`MultiThumbSliderPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`MultiThumbSliderRootSlotProps`

activeThumb: 타입string | null
현재 조절 중인 핸들의 인덱스입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
percentages: 타입readonly number[]
각 핸들의 백분율 위치입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
values: 타입readonly string[]
현재 순서 있는 값 컬렉션입니다.

`MultiThumbSliderThumbSlotProps`

activeThumb: 타입string | null
현재 조절 중인 핸들의 인덱스입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
index: 타입number
부모 컬렉션 안의 0부터 시작하는 위치입니다.
percentage: 타입number
현재 값을 범위의 백분율로 나타낸 값입니다.
percentages: 타입readonly number[]
각 핸들의 백분율 위치입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.
values: 타입readonly string[]
현재 순서 있는 값 컬렉션입니다.

이벤트

`MultiThumbSliderRoot`

update:modelValue: 페이로드readonly string[]
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`MultiThumbSliderThumbLabelResolver`

type MultiThumbSliderThumbLabelResolver = NonNullable<MultiThumbSliderRootProps['getThumbLabel']>

`MultiThumbSliderValueFormatter`

type MultiThumbSliderValueFormatter = NonNullable<MultiThumbSliderRootProps['formatValue']>

`MultiThumbSliderValueChangeHandler`

type MultiThumbSliderValueChangeHandler = (values: readonly string[]) => void

파트

공통 범위: [data-scope="multi-thumb-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 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Multi Thumb Slider ​

용법 ​

핸들 두 개로 고르는 범위 ​

핸들 세 개로 나누는 구간 ​

핸들 교차 여러 핸들 ​

부모가 관리하는 범위 ​

API ​

Props ​

MultiThumbSliderRootProps ​

MultiThumbSliderThumbProps ​

MultiThumbSliderPartProps ​

슬롯 ​

MultiThumbSliderRootSlotProps ​

MultiThumbSliderThumbSlotProps ​

이벤트 ​

MultiThumbSliderRoot ​

기타 타입 ​

MultiThumbSliderThumbLabelResolver ​

MultiThumbSliderValueFormatter ​

MultiThumbSliderValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​

Multi Thumb Slider

용법

핸들 두 개로 고르는 범위

핸들 세 개로 나누는 구간

핸들 교차 여러 핸들

부모가 관리하는 범위

API

Props

`MultiThumbSliderRootProps`

`MultiThumbSliderThumbProps`

`MultiThumbSliderPartProps`

슬롯

`MultiThumbSliderRootSlotProps`

`MultiThumbSliderThumbSlotProps`

이벤트

`MultiThumbSliderRoot`

기타 타입

`MultiThumbSliderThumbLabelResolver`

`MultiThumbSliderValueFormatter`

`MultiThumbSliderValueChangeHandler`

파트

키보드 동작

접근성