SegmentedSlider

TxSegmentedSlider maps a finite list of values onto a slider-like track. Use it when the available values are discrete and should remain visible while the user changes selection.

Basic Usage

SegmentedSlider

Demo will load when visible.

<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>
  <div style="display: flex; flex-direction: column; gap: 16px; width: 400px;">
    <div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        Current value: {{ value }}
      </div>
      <TxSegmentedSlider v-model="value" :segments="segments" />
    </div>
  </div>
</template>

Custom Options

SegmentedSlider (custom)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

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

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

<template>
  <div style="display: flex; flex-direction: column; gap: 24px; width: 400px;">
    <div>
      <div style="font-size: 14px; margin-bottom: 12px;">
        Price tier selection
      </div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        Current: {{ priceValue }}
      </div>
      <TxSegmentedSlider v-model="priceValue" :segments="priceSegments" />
    </div>

    <div>
      <div style="font-size: 14px; margin-bottom: 12px;">
        Rating selection
      </div>
      <div style="font-size: 12px; opacity: 0.72; margin-bottom: 8px;">
        Current: {{ ratingValue }} stars
      </div>
      <TxSegmentedSlider v-model="ratingValue" :segments="ratingSegments" />
    </div>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`modelValue`	`number \| string`	`0`	Currently selected segment value.
`segments`	`SegmentedSliderSegment[]`	`[]`	Ordered segment definitions rendered along the track.
`disabled`	`boolean`	`false`	Prevents click and keyboard selection changes.
`showLabels`	`boolean`	`true`	Shows each segment label when a label is provided.
`vertical`	`boolean`	`false`	Renders a vertical track with bottom-to-top progress.

SegmentedSliderSegment

Prop	Type	Description
`value`	`number \| string`	Value emitted when the segment is selected.
`label`	`string`	Optional text rendered next to the segment marker.

Events

Event	Params	Description
`update:modelValue`	`(value: number \| string)`	Emitted when an enabled segment requests a new value.
`change`	`(value: number \| string)`	Emitted with the same selected value for change listeners.