Slider

Basic

Value: 50

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

<FuiSlider v-model="value" />

With value

Value: 50

<FuiSlider v-model="value" :min="0" :max="100" />

Vertical

Value: 50

<FuiSlider v-model="value" vertical />

Size

Small: 50

Medium: 50

<FuiSlider v-model="smallValue" size="small" />
<FuiSlider v-model="mediumValue" size="medium" />

Disabled

<FuiSlider v-model="value" disabled />

Props

Prop	Type	Default	Description
modelValue	number	50	Current value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
vertical	boolean	false	Vertical orientation
size	small | medium	medium	Slider size
disabled	boolean	false	Disabled state