Slider

Draggable slider with range, marks, tooltip, gradient fill, custom thumb, and more.

30

<template>
  <VxSlider v-model="value" />
</template>

Range

20 – 70

<template>
  <VxSlider v-model="value" range />
</template>

Step with Stops

50

<template>
  <VxSlider :step="10" show-stops />
</template>

With Input

<template>
  <VxSlider show-input />
</template>

Input with Prefix / Suffix

$

%

<template>
  <VxSlider show-input prefix="$" />
  <VxSlider show-input suffix="%" />
</template>

Range with Input

–

<template>
  <VxSlider range show-input />
</template>

Show Min / Max Labels

0

100

<template>
  <VxSlider show-min-max />
</template>

Show Value Below Thumb

60%

<template>
  <VxSlider show-value suffix="%" />
</template>

Tooltip Always + Format

60%

<template>
  <VxSlider tooltip-always :format-tooltip="v => v + '%'" />
</template>

Custom Color

<template>
  <VxSlider color="#22c55e" />
</template>

Custom Track Color

<template>
  <VxSlider color="#3b82f6" track-color="#1e3a5f" />
</template>

Gradient Fill

<template>
  <VxSlider :gradient="['#3b82f6', '#8b5cf6', '#ec4899']" />
</template>

Thumb Shapes

circle

square

diamond

<template>
  <VxSlider thumb-shape="circle" />
  <VxSlider thumb-shape="square" />
  <VxSlider thumb-shape="diamond" />
</template>

Custom Thumb Slot

50

50

<template>
  <VxSlider v-model="value">
    <template #thumb="{ value, dragging }">
      <div class="my-thumb">{{ value }}</div>
    </template>
  </VxSlider>
</template>

Marks

0°

1°

Cold

Warm

Hot

<template>
  <VxSlider :marks="{ 0: '0°', 0.5: 'Warm', 1: '1°' }" />
</template>

Snap to Marks

Only allows values at mark positions.

0

100%

25%

50%

75%

0.5

<template>
  <VxSlider snap-to-marks :marks="{ 0: '0%', 50: '50%', 100: '100%' }" />
</template>

Reversed

100

0

30

<template>
  <VxSlider reversed />
</template>

Precision

<template>
  <VxSlider :min="0" :max="1" :step="0.01" :precision="2" />
</template>

Sizes

sm

default

lg

<template>
  <VxSlider size="sm" />
  <VxSlider />
  <VxSlider size="lg" />
</template>

Vertical

50

<template>
  <VxSlider vertical height="200px" />
</template>

Readonly

65%

<template>
  <VxSlider :model-value="65" readonly />
</template>

Disabled

<template>
  <VxSlider disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	number | [number, number]	0	Value (v-model)
min	number	0	Minimum
max	number	100	Maximum
step	number	1	Step
disabled	boolean	false	Disable
readonly	boolean	false	Read only
range	boolean	false	Range mode
showTooltip	boolean	true	Show tooltip
tooltipAlways	boolean	false	Always show tooltip
showStops	boolean	false	Step dots
showInput	boolean	false	Number input
showValue	boolean	false	Value below thumb
showMinMax	boolean	false	Min/max labels
size	'sm' | 'default' | 'lg'	'default'	Size
color	string	''	Fill/thumb color
trackColor	string	''	Inactive track color
gradient	string[]	—	Gradient fill colors
formatTooltip	(v: number) => string	—	Tooltip formatter
marks	Record<number, string>	—	Labeled marks
snapToMarks	boolean	false	Only allow mark values
vertical	boolean	false	Vertical mode
reversed	boolean	false	Flip direction
height	string	'200px'	Vertical height
lazy	boolean	false	Emit change on drop only
debounce	number	0	Debounce updates (ms)
precision	number	—	Decimal places
thumbShape	'circle' | 'square' | 'diamond'	'circle'	Thumb shape
prefix	string	''	Input prefix text
suffix	string	''	Input suffix text
label	string	''	Accessible label

Events

Event	Type	Description
update:modelValue	(v)	Value changed
change	(newVal, oldVal)	Value changed (with old value)

Slots

Slot	Props	Description
thumb	{ value, dragging }	Custom thumb content