DEV Community

loading...
Cover image for Vue3 Slider

Vue3 Slider

primetek profile image PrimeTek ・1 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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<Slider v-model="value" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode
export default {
    data() {
        return {
            value: [20,80]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Orientation

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

<Slider v-model="value" orientation="vertical" />
Enter fullscreen mode Exit fullscreen mode

Step

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

<Slider v-model="value" :step="20" />
Enter fullscreen mode Exit fullscreen mode

Min-Max

Boundaries are specified with min and max attributes.

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

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.

Discussion (0)

pic
Editor guide