---
title: "SegmentedSlider 分段滑块"
description: "在一组离散档位中选择一项的滑块"
category: Form
status: beta
since: 0.3.4
tags: [segmented, slider, form]
syncStatus: reviewed
verified: true
---

## 用法

### 基础
:::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>
---
:::

### 自定义分段
`value` 可以是字符串，`label` 可以是任意文本，包括 emoji。
:::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>
---
:::

### 发布策略配置
风险档位用 `TxSegmentedSlider`，流量比例用 `TxSlider`。
::TuffDemoWrapper{demo="ComponentsReleasePolicyDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const riskSegments = [
    { value: 1, label: '低' },
    { value: 2, label: '中' },
    { value: 3, label: '高' },
    { value: 4, label: '冻结' },
  ]
  </script>

  <template>
    <TxCascader v-model="releasePath" :options="scopeOptions" placeholder="发布范围" />
    <TxFlatSelect v-model="rolloutMode" placeholder="发布模式">
      <TxFlatSelectItem value="phased" label="分阶段" />
      <TxFlatSelectItem value="guarded" label="护栏发布" />
    </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="输入标签后回车" :max="5" />
  </template>
---
::

### 最佳实践

- 使用 3–7 个稳定分段；长列表或动态选项改用 `TxSelect` 或 `TxSearchSelect`。
- 每个分段的 `value` 用原始类型且唯一。
- 只有相邻文案已解释每个刻度时才关闭 `showLabels`。
- 连续数值用 `TxSlider`；风险、套餐、质量门禁等有序档位用 `TxSegmentedSlider`。

## API 参考

### 属性

| 属性名 | 类型 | 默认值 | 说明 |
|------|------|---------|------|
| `modelValue` | `number \| string \| null` | `0` | 选中的分段值；为 `null` 时挂载后自动选中第一段。 |
| `segments` | `SegmentedSliderSegment[]` | `[]` | 沿轨道依次排列的分段。 |
| `disabled` | `boolean` | `false` | 禁止点击与键盘改变选择。 |
| `showLabels` | `boolean` | `true` | 显示分段的 `label`（若提供）。 |
| `vertical` | `boolean` | `false` | 改为纵向轨道，进度自下而上。 |

### 事件

| 事件名 | 参数 | 说明 |
|------|------|------|
| `update:modelValue` | `(value: number \| string)` | 点击或用键盘选择分段时触发。 |
| `change` | `(value: number \| string)` | 与 `update:modelValue` 同时触发。 |

### 类型

:::TuffCodeBlock{lang="ts"}
---
code: |
  export interface SegmentedSliderSegment {
    value: number | string // 选中时发出的值
    label?: string // 分段旁的文字
  }
---
:::

## 概述

- 整行是 `radiogroup`，每个停靠点是 `radio`。
- Tab 只进入一次，落在当前值；方向键移动并在两端停住，Home / End 直达首尾。纵向布局中向上为前进。
- 焦点环只在键盘操作时出现；悬停时未选中的点略微放大。减弱动效下两者都停止。

## 技术实现

- 源码：`packages/tuffex/packages/components/src/segmented-slider/`。

<TuffDocSourceLink />