Slider

Diapazon, belgilar, tultip, gradient to‘ldirish, moslashtirilgan thumb va boshqalarga ega tortiladigan slayder.

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

Faqat belgi pozitsiyalaridagi qiymatlarga ruxsat beradi.

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	Qiymat (v-model)
min	number	0	Minimal
max	number	100	Maksimal
step	number	1	Qadam
disabled	boolean	false	O‘chirish
readonly	boolean	false	Faqat o‘qish
range	boolean	false	Diapazon rejimi
showTooltip	boolean	true	Tultipni ko‘rsatish
tooltipAlways	boolean	false	Tultipni doimo ko‘rsatish
showStops	boolean	false	Qadam nuqtalari
showInput	boolean	false	Raqam kiritish maydoni
showValue	boolean	false	Thumb ostidagi qiymat
showMinMax	boolean	false	Min/max yorliqlari
size	'sm' | 'default' | 'lg'	'default'	O‘lcham
color	string	''	To‘ldirish/thumb rangi
trackColor	string	''	Nofaol yo‘l rangi
gradient	string[]	—	Gradient to‘ldirish ranglari
formatTooltip	(v: number) => string	—	Tultip formatlovchi
marks	Record<number, string>	—	Nomli belgilar
snapToMarks	boolean	false	Faqat belgi qiymatlariga ruxsat
vertical	boolean	false	Vertikal rejim
reversed	boolean	false	Yo‘nalishni teskariga qilish
height	string	'200px'	Vertikal balandlik
lazy	boolean	false	Change hodisasini faqat qo‘yib yuborilganda chiqarish
debounce	number	0	Yangilanishlarni debounce qilish (ms)
precision	number	—	O‘nli xonalar
thumbShape	'circle' | 'square' | 'diamond'	'circle'	Thumb shakli
prefix	string	''	Kiritish prefiks matni
suffix	string	''	Kiritish suffiks matni
label	string	''	Qulay foydalanish uchun yorliq

Events

Event	Type	Description
update:modelValue	(v)	Qiymat o‘zgardi
change	(newVal, oldVal)	Qiymat o‘zgardi (eski qiymat bilan)

Slots

Slot	Props	Description
thumb	{ value, dragging }	Moslashtirilgan thumb kontenti