Nouislider - v12.1.0

Our Nouislider refers to a lightweight JavaScript range slider library. The slider offers a wide selection of options and settings and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
Keep reading our Nouislider examples and learn how to use this plugin.

Initialization

To use it, import it from the components folder

import BaseSlider from '@/components/BaseSlider'

Global usage

Vue.component(BaseSlider.name, BaseSlider)

For local usage

export default {
  components: {
    BaseSlider
  }
}

Examples

Slider

<base-slider v-model="sliders.simple"></base-slider>

Range slider

<base-slider class="mt-5" v-model="sliders.range" :range="{min: 100, max: 500}"></base-slider>

Slider Props

Switch Events