Slider

Перетаскиваемый ползунок с диапазоном, метками, подсказкой, градиентной заливкой, пользовательским маркером и многим другим.

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

Разрешает только значения в позициях меток.

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	Значение (v-model)
min	number	0	Минимум
max	number	100	Максимум
step	number	1	Шаг
disabled	boolean	false	Отключить
readonly	boolean	false	Только для чтения
range	boolean	false	Режим диапазона
showTooltip	boolean	true	Показывать подсказку
tooltipAlways	boolean	false	Всегда показывать подсказку
showStops	boolean	false	Точки шагов
showInput	boolean	false	Числовое поле ввода
showValue	boolean	false	Значение под маркером
showMinMax	boolean	false	Подписи min/max
size	'sm' | 'default' | 'lg'	'default'	Размер
color	string	''	Цвет заливки/маркера
trackColor	string	''	Цвет неактивной дорожки
gradient	string[]	—	Цвета градиентной заливки
formatTooltip	(v: number) => string	—	Форматтер подсказки
marks	Record<number, string>	—	Подписанные метки
snapToMarks	boolean	false	Разрешать только значения меток
vertical	boolean	false	Вертикальный режим
reversed	boolean	false	Инвертировать направление
height	string	'200px'	Вертикальная высота
lazy	boolean	false	Эмитить change только после отпускания
debounce	number	0	Задержка обновлений (мс)
precision	number	—	Количество десятичных знаков
thumbShape	'circle' | 'square' | 'diamond'	'circle'	Форма маркера
prefix	string	''	Текст префикса ввода
suffix	string	''	Текст суффикса ввода
label	string	''	Доступная подпись

Events

Event	Type	Description
update:modelValue	(v)	Значение изменено
change	(newVal, oldVal)	Значение изменено (со старым значением)

Slots

Slot	Props	Description
thumb	{ value, dragging }	Пользовательское содержимое маркера