Slider

Slider component for numeric input. Supports single value, range, multi-point, snap-to-marks, vertical, reversed, and more.

Basic Usage

Two-way binding via v-model. Default mode binds a number.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(40)
</script>
<template>
  <TSlider v-model="value" />
</template>

Range Slider

Set range to true for dual-handle mode. v-model binds [number, number].

Show Code

<TSlider v-model="value" :range="true" />

Marks

marks accepts a { value: label } object to show tick marks and labels at specific positions.

Show Code

<TSlider v-model="value" :marks="{ 0: '0°C', 50: '50°C', 100: '100°C' }" />

Snap to Marks (Dots)

Enable dots to snap the handle only to defined mark positions. Requires marks.

Show Code

<TSlider v-model="value" :marks="{ 0: 'A', 50: 'B', 100: 'C' }" dots />

Color

Set color to apply Tabler theme colors (e.g. red, green, orange, purple).

Show Code

<TSlider v-model="value" color="red" />

Disabled State

Show Code

<TSlider v-model="value" disabled />

Custom Step

Show Code

<TSlider v-model="value" :step="10" />

Vertical

Use vertical to flip the slider vertically.

Show Code

<TSlider v-model="value" vertical />
<TSlider v-model="value" :range="true" vertical />

Reversed

reversed flips the start direction: right-to-left for horizontal, top-to-bottom for vertical.

Show Code

<TSlider v-model="value" reversed />
<TSlider v-model="value" :range="true" reversed />
<TSlider v-model="value" vertical reversed />

Multi-point Slider

range accepts a number to create N handles. Each handle is constrained between its neighbors.

Show Code

<TSlider v-model="values" :range="3" />

Tooltip Display

Control tooltip visibility with tooltip prop: 'always', 'hover' (default), or 'never'.

Show Code

<TSlider v-model="value" tooltip="always" />
<TSlider v-model="value" tooltip="never" />

Tooltip Placement

Use tooltip-placement to set tooltip position: 'top', 'bottom', 'right', 'left'.

Show Code

<TSlider v-model="value" tooltip-placement="top" />
<TSlider v-model="value" tooltip-placement="bottom" />

Custom Formatting

tooltip-formatter customizes the display text.

Show Code

<TSlider v-model="value" tooltip="always" :tooltip-formatter="(v) => v + '%'" />

Draggable Range

When range ≥ 2, the fill area can be dragged to move all handles together.

Show Code

<TSlider v-model="values" :range="true" draggable-range />

Size

size controls the overall slider size: 'sm', 'md' (default), 'xl'.

Show Code

<TSlider v-model="value" size="sm" />
<TSlider v-model="value" size="md" />
<TSlider v-model="value" size="xl" />

API

Props

Prop	Description	Type	Default
v-model	Current value. Single: number, Multi: number[]	number | number[]	0
min	Minimum value	number	0
max	Maximum value	number	100
step	Step interval. null restricts to marks only	number | null	1
range	Multi-handle mode. true for dual, number for N points	boolean | number	false
disabled	Disabled state	boolean	false
vertical	Vertical orientation	boolean	false
reversed	Reverse start direction	boolean	false
size	Slider size	'sm' | 'md' | 'xl'	'md'
draggable-range	Drag fill area to move all handles (range ≥ 2)	boolean	true
marks	Tick marks { value: label }	Record<number, string>	undefined
dots	Snap to mark positions only	boolean	false
tooltip	Tooltip display mode	'always' | 'hover' | 'never'	'hover'
tooltip-formatter	Tooltip text formatter	(val: number) => string	String
tooltip-placement	Tooltip position	'top' | 'bottom' | 'right' | 'left'	undefined
color	Theme color	TablerColor	'primary'

Emits

Event	Description	Callback
change	Fired during drag	(value: number | number[])