Note

This documentation describes the InputSliderDiscrete Vue component for native UI views, for Xml templates see input-slider-discrete.

InputSliderDiscrete

A discrete slider input that lets users select one value, or a start/end range, from an explicit numeric list.

Import

import { InputSliderDiscrete } from '@neos/design-system'

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
modelValue	number \| [number, number] \| null	null	Bound value (single value or range tuple)
values	number[]	—	Allowed values displayed as markers (required)
isRange	boolean	false	Enables range mode with two thumbs
trackColor	string	undefined	Custom color for the non-selected track segment
selectedTrackColor	string	undefined	Custom color for the selected track segment
selectedThumbColor	string	undefined	Custom color for slider thumbs

Emits

Event	Payload	Description
update:modelValue	number \| [number, number]	Value change
aiApply / aiCancel	—	AI suggestion events
update:focused	boolean	Focus state change

Behavior Notes

• The slider snaps to the nearest value from values.
• Range mode is enabled when isRange is true.
• Arrow keys (ArrowLeft, ArrowRight) move the active thumb, with Ctrl + arrow keys switching between thumbs in range mode.
• Interaction is disabled when readonly, disabled, or when values is empty.

Usage Examples

Single value

<InputSliderDiscrete v-model="score" label="Score" :values="[0, 25, 50, 75, 100]" />

Range value

<InputSliderDiscrete
  v-model="scoreRange"
  label="Score range"
  :values="[0, 25, 50, 75, 100]"
  :is-range="true"
/>

Custom colors

<InputSliderDiscrete
  v-model="score"
  label="Styled slider"
  :values="[0, 25, 50, 75, 100]"
  track-color="#111111"
  selected-track-color="#123456"
  selected-thumb-color="#654321"
/>