Slider

An input where the user selects a value from within a given range.

Examples

Default

<script setup>
import { ref } from 'vue'
import { Slider } from '@empathyds/vue'

const value = ref([50])
</script>

<template>
  <Slider
    v-model="value"
    :max="100"
    :step="1"
  />
</template>

Props

Slider

Prop	Type	Default	Description
defaultValue	number[]	-	The default value of the slider.
modelValue	number[]	-	The controlled value of the slider.
min	number	0	The minimum value.
max	number	100	The maximum value.
step	number	1	The step value.
minStepsBetweenThumbs	number	0	The minimum steps between thumbs.
disabled	boolean	false	Whether the slider is disabled.
orientation	horizontal | vertical	horizontal	The orientation of the slider.
dir	ltr | rtl	-	The reading direction of the slider.
inverted	boolean	false	Whether the slider is inverted.

Slots

Slider

Slot	Description
default	The content of the slider.