Slider

Slider component for selecting a value within a given range, supporting drag interaction, step intervals, and vertical orientation.

Basic Usage

The simplest slider with two-way data binding via v-model.

0

<template>
  <u-slider v-model="value" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(0);
</script>

Set Color

Set the slider color via color prop. Available colors: primary, success, warning, error.

30

30

30

30

<template>
  <u-slider v-model="value" color="success" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(30);
</script>

Range & Step

Set the range via min and max props, and the step interval via step prop.

50

30

0

<template>
  <u-slider v-model="value1" :max="200" />
  <u-slider v-model="value2" :step="10" />
  <u-slider v-model="value3" :step="0.1" />
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(50);
  const value2 = ref(30);
  const value3 = ref(0);
</script>

Vertical Mode

Set vertical prop to enable vertical slider mode.

30

30

<template>
  <u-slider v-model="value" vertical />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(30);
</script>

Disabled State

Disable the slider via disabled prop.

30

<template>
  <u-slider v-model="value" disabled />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(30);
</script>

Custom Size

Customize the thumb and track size via thumbSize and trackSize props.

30

60

<template>
  <u-slider v-model="value1" thumbSize="28px" trackSize="10px" />
  <u-slider v-model="value2" thumbSize="14px" trackSize="4px" />
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(30);
  const value2 = ref(60);
</script>

USlider API

Property	Description	Type	Default
modelValue	Current value	number	0
min	Minimum value	number	0
max	Maximum value	number	100
step	Step interval	number	1
disabled	Whether to disable	boolean	false
color	Slider color	'primary' | 'success' | 'warning' | 'error'	-
vertical	Whether vertical mode	boolean	false
thumbSize	Size of the thumb handle	string	'20px'
trackSize	Size of the track bar	string	'6px'

USlider Events

Event	Description	Type
change	Triggered when value changes (after drag ends)	(value: number) => void