Vue3 Slider

Vue Slider is an input component to provide a numerical input.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Slider from 'primevue/slider';

Getting Started

Two-way binding is defined using the standard v-model directive.

<Slider v-model="value" />

Range

Range slider provides two handles to define two values. Enable range property and bind an array to implement a range slider.

<Slider v-model="value" :range="true" />

export default {
    data() {
        return {
            value: [20,80]
        }
    }
}

Orientation

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

<Slider v-model="value" orientation="vertical" />

Step

Step factor is 1 by default and can be customized with step option.

<Slider v-model="value" :step="20" />

Min-Max

Boundaries are specified with min and max attributes.

<Slider v-model="value" :step="20" :min="50" :max="200" />

Theming

Slider supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Slider showcase for demos and documentation.