Slider

The Slider component allows users to select a value from a range by dragging a handle. It supports minimum and maximum values, step increments, size variations, and can be disabled when needed. Additionally, it includes hover and press states for enhanced interactivity and emits a slideend event when the user finishes interacting with the slider.

Basic Usage

Slider value: 0

<template>
  <spr-slider :min="0" :max="100" :step="1" v-model="sliderValue" />
  <p class="spr-m-0">Slider value: {{ sliderValue }}</p>
</template>

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

Step

Slider value: 0

<template>
  <spr-slider :min="0" :max="100" :step="20" v-model="sliderValueStep" />
  <p class="spr-m-0">Slider value: {{ sliderValueStep }}</p>
</template>

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

Sizes

Slider component has 2 sizes. You can use the size prop to set the size of the slider. The default size is 'lg'. The available sizes are 'lg' and 'sm'.

<template>
  <spr-slider :min="0" :max="100" :step="1" v-model="sliderValueForLG" size="lg" />
  <spr-slider :min="0" :max="100" :step="1" v-model="sliderValueForSM" size="sm" />
</template>

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

Disabled

<template>
  <spr-slider :min="0" :max="100" :step="1" v-model="sliderValueDisabled" :disabled="true" />
</template>

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

API Reference

Name	Description	Type	Default
v-model	Changes slider value with two-way data binding	number	0
size	Defines the size of the slider. The accepted values are 'lg' and 'sm'.	string	lg
min	Sets minimum value	number	0
max	Sets maximum value	number	100
step	Defines range step	number	1
disabled	Disables slider	boolean	false