Multi Thumb Slider

Adjust several ordered values on one shared numeric track.

Usage

Two thumb range

Use two thumbs to choose the lower and upper bounds of an interval.

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>

Three thumb thresholds

Use three thumbs to divide one numeric range into meaningful thresholds.

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>

Crossing thumbs

Prevent or normalize thumb crossing according to the configured range policy.

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>

Controlled range

Let the parent own every thumb value in the selected interval.

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 package: @sectile/vue/multi-thumb-slider

Components

MultiThumbSliderRoot
MultiThumbSliderTrack
MultiThumbSliderRange
MultiThumbSliderThumb

Props

`MultiThumbSliderRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: Typereadonly (number | string)[]Defaultundefined
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
form: TypestringDefaultundefined
ID of the native form associated with the control.
formatValue: Type(value: string, id: string) => stringDefaultundefined
Formats a value for visible text.
getThumbLabel: Type(id: string) => stringDefaultundefined
Returns the accessible label for a slider thumb.
label: TypestringDefaultundefined
Accessible name announced for the control.
max: Typenumber | stringDefault100
Largest value accepted by the component.
min: Typenumber | stringDefault0
Smallest value accepted by the component.
modelValue: Typereadonly (number | string)[]Defaultundefined
Current value when state is controlled by the parent.
name: TypestringDefaultundefined
Name used for native form submission.
orientation: Type'horizontal' | 'vertical'Default'horizontal'
Axis used for layout and keyboard movement.
policies: TypeMultiThumbSliderPoliciesDefaultundefined
Behavior policies that customize validation, movement, or selection.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.
step: Typenumber | stringDefault1
Smallest value increment accepted by the component.
thumbs: Typereadonly string[]DefaultRequired
Ordered slider thumb definitions.

`MultiThumbSliderThumbProps`

as: TypePrimitiveAsDefaultundefined
Element or component rendered for this part.
asChild: TypebooleanDefaultundefined
Whether to merge this part into its single child instead of rendering a wrapper.
value: TypestringDefaultRequired
Current value exposed by this contract.

`MultiThumbSliderPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`MultiThumbSliderRootSlotProps`

activeThumb: Typestring | null
Index of the thumb currently being adjusted.
disabled: Typeboolean
Whether interaction is unavailable.
percentages: Typereadonly number[]
Percentage position for each thumb.
readonly: Typeboolean
Whether the value can be inspected but not changed.
values: Typereadonly string[]
Current ordered value collection.

`MultiThumbSliderThumbSlotProps`

activeThumb: Typestring | null
Index of the thumb currently being adjusted.
disabled: Typeboolean
Whether interaction is unavailable.
index: Typenumber
Zero-based position in the parent collection.
percentage: Typenumber
Current value expressed as a percentage of its range.
percentages: Typereadonly number[]
Percentage position for each thumb.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring
Current value exposed by this contract.
values: Typereadonly string[]
Current ordered value collection.

Events

`MultiThumbSliderRoot`

update:modelValue: Payloadreadonly string[]
Emitted when the component requests a new controlled value.

Other types

`MultiThumbSliderThumbLabelResolver`

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

`MultiThumbSliderValueFormatter`

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

`MultiThumbSliderValueChangeHandler`

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

Parts

Shared scope: [data-scope="multi-thumb-slider"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`track`	`[data-part="track"]`	Defines the measurable path used by one or more thumbs.	—
`range`	`[data-part="range"]`	Shows the active interval on the track.	—
`thumb`	`[data-part="thumb"]`	Controls one value along the track.	—

Keyboard interaction

Key	Behavior
`Arrow Right` / `Arrow Up`	Increase the value by one step.
`Arrow Left` / `Arrow Down`	Decrease the value by one step.
`Home` / `End`	Move to the minimum or maximum value.
`Page Up` / `Page Down`	Change the value by the configured page step when supported.

Accessibility

Every thumb is separately named and exposes its own minimum, maximum, current value, and orientation.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Multi Thumb Slider ​

Usage ​

Two thumb range ​

Three thumb thresholds ​

Crossing thumbs ​

Controlled range ​

API ​

Props ​

MultiThumbSliderRootProps ​

MultiThumbSliderThumbProps ​

MultiThumbSliderPartProps ​

Slots ​

MultiThumbSliderRootSlotProps ​

MultiThumbSliderThumbSlotProps ​

Events ​

MultiThumbSliderRoot ​

Other types ​

MultiThumbSliderThumbLabelResolver ​

MultiThumbSliderValueFormatter ​

MultiThumbSliderValueChangeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​

Multi Thumb Slider

Usage

Two thumb range

Three thumb thresholds

Crossing thumbs

Controlled range

API

Props

`MultiThumbSliderRootProps`

`MultiThumbSliderThumbProps`

`MultiThumbSliderPartProps`

Slots

`MultiThumbSliderRootSlotProps`

`MultiThumbSliderThumbSlotProps`

Events

`MultiThumbSliderRoot`

Other types

`MultiThumbSliderThumbLabelResolver`

`MultiThumbSliderValueFormatter`

`MultiThumbSliderValueChangeHandler`

Parts

Keyboard interaction

Accessibility