Slider

Slider is a component to provide input with a drag handle.

Download #


npx volt-vue add Slider

Import #


import Slider from '@/volt/Slider.vue';

Basic #

Slider is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <Slider v-model="value" class="w-56" />
    </div>
</template>

<script setup lang="ts">
import Slider from '@/volt/Slider.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Input #

Slider is connected to an input field using two-way binding.


<div class="card flex justify-center">
    <div class="w-56">
        <InputText v-model.number="value" class="w-full mb-4" />
        <Slider v-model="value" class="w-full" />
    </div>
</div>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import Slider from '@/volt/Slider.vue';
import { ref } from 'vue';

const value = ref(50);
</script>

Step #

Size of each movement is defined with the step property.


<template>
    <div class="card flex justify-center">
        <Slider v-model="value" :step="20" class="w-56" />
    </div>
</template>

<script setup lang="ts">
import Slider from '@/volt/Slider.vue';
import { ref } from 'vue';

const value = ref(20);
</script>

Range #

When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.


<template>
    <div class="card flex justify-center">
        <Slider v-model="value" range class="w-56" />
    </div>
</template>

<script setup lang="ts">
import Slider from '@/volt/Slider.vue';
import { ref } from 'vue';

const value = ref([20, 80]);
</script>

Filter #

Image filter implementation using multiple sliders.


<template>
    <div class="card flex flex-col items-center justify-center">
        <img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
        <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
        <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
    </div>
</template>

<script setup lang="ts">
import SelectButton from '@/volt/SelectButton.vue';
import Slider from '@/volt/Slider.vue';
import { computed, ref } from 'vue';

const filter = ref(0);
const filterValues = ref([100, 100, 0]);
const filterOptions = ref([
    { label: 'Contrast', value: 0 },
    { label: 'Brightness', value: 1 },
    { label: 'Sepia', value: 2 }
]);
const filterStyle = computed(() => {
    return {
        filter: `contrast(${filterValues.value[0]}%) brightness(${filterValues.value[1]}%) sepia(${filterValues.value[2]}%)`
    };
});
</script>

Vertical #

Default layout of slider is horizontal, use orientation property for the alternative vertical mode.


<template>
    <div class="card flex justify-center">
        <Slider v-model="value" orientation="vertical" class="h-56" />
    </div>
</template>

<script setup lang="ts">
import Slider from '@/volt/Slider.vue';
import { ref } from 'vue';

const value = ref(50);
</script>