PrimeTek UI Component Libraries
Vue3 Slider

Vue3 Slider

PrimeTek's photo
PrimeTek
·

2 min read

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.

Vue.jsJavaScriptWeb Development