SegmentedSlider | Tuff Docs

Usage

Loading demo...

A value can be a string, and a label any text, emoji included.

Loading demo...

Use TxSegmentedSlider for the risk tier and TxSlider for the traffic ratio.

Loading demo...

Use 3–7 stable segments; switch to TxSelect or TxSearchSelect for long or dynamic lists.
Keep each segment value primitive and unique.
Turn off showLabels only when nearby text already explains each step.
Use TxSlider for continuous numbers and TxSegmentedSlider for ordered tiers such as risk, plan, or quality gates.

Prop	Type	Default	Description
`modelValue`	`number \| string \| null`	`0`	Selected segment value; `null` selects the first segment after mount.
`segments`	`SegmentedSliderSegment[]`	`[]`	Segments, in order along the track.
`disabled`	`boolean`	`false`	Blocks changes by click and keyboard.
`showLabels`	`boolean`	`true`	Shows each segment's `label`, if it has one.
`vertical`	`boolean`	`false`	Uses a vertical track that fills bottom-to-top.

Event	Params	Description
`update:modelValue`	`(value: number \| string)`	Fires when a segment is chosen by click or keyboard.
`change`	`(value: number \| string)`	Fires together with `update:modelValue`.

export interface SegmentedSliderSegment {
  value: number | string // emitted when selected
  label?: string // text beside the stop
}

The row is a radiogroup and each stop a radio.
Tab enters the row once, on the current stop; arrow keys move and stop at both ends, and Home / End jump to them. In the vertical layout, Up moves forward.
The focus ring shows only for keyboard use; hover slightly grows an unselected stop. Both stop under reduced motion.

packages/tuffex/packages/components/src/segmented-slider/index.ts