---
title: "SegmentedSlider"
description: "A slider for choosing one of a fixed set of discrete steps."
category: Form
status: beta
since: 0.3.4
tags: [segmented, slider, form]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
:::TuffDemoWrapper{demo="SegmentedSliderSegmentedSliderDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  import { ref } from 'vue'

  const value = ref(1)
  const segments = [
    { value: 0, label: 'Small' },
    { value: 1, label: 'Medium' },
    { value: 2, label: 'Large' },
    { value: 3, label: 'XL' },
  ]
  </script>

  <template>
    <TxSegmentedSlider v-model="value" :segments="segments" />
  </template>
---
:::

### Custom Segments
A `value` can be a string, and a `label` any text, emoji included.
:::TuffDemoWrapper{demo="SegmentedSliderSegmentedSliderCustomDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  import { ref } from 'vue'

  const plan = ref('pro')
  const planSegments = [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Team' },
    { value: 'enterprise', label: 'Enterprise' },
  ]

  const rating = ref(3)
  const ratingSegments = [1, 2, 3, 4, 5].map(n => ({ value: n, label: '⭐'.repeat(n) }))
  </script>

  <template>
    <TxSegmentedSlider v-model="plan" :segments="planSegments" />
    <TxSegmentedSlider v-model="rating" :segments="ratingSegments" />
  </template>
---
:::

### Release Policy
Use `TxSegmentedSlider` for the risk tier and `TxSlider` for the traffic ratio.
::TuffDemoWrapper{demo="ComponentsReleasePolicyDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const riskSegments = [
    { value: 1, label: 'Low' },
    { value: 2, label: 'Med' },
    { value: 3, label: 'High' },
    { value: 4, label: 'Freeze' },
  ]
  </script>

  <template>
    <TxCascader v-model="releasePath" :options="scopeOptions" placeholder="Release scope" />
    <TxFlatSelect v-model="rolloutMode" placeholder="Rollout mode">
      <TxFlatSelectItem value="phased" label="Phased" />
      <TxFlatSelectItem value="guarded" label="Guarded" />
    </TxFlatSelect>
    <TxSegmentedSlider v-model="riskLevel" :segments="riskSegments" />
    <TxSlider v-model="traffic" :min="5" :max="100" :step="5" show-value :format-value="value => value + '%'" />
    <TxTagInput v-model="labels" placeholder="Press Enter to add tags" :max="5" />
  </template>
---
::

### Best Practices

- 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.

## API Reference

### Props

| 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. |

### Events

| 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`. |

### Types

:::TuffCodeBlock{lang="ts"}
---
code: |
  export interface SegmentedSliderSegment {
    value: number | string // emitted when selected
    label?: string // text beside the stop
  }
---
:::

## Overview

- 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.

## Technologies

- Source: `packages/tuffex/packages/components/src/segmented-slider/`.

<TuffDocSourceLink />