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

Copy
import BaseSlider from '@/components/BaseSlider'

Global usage

Copy
Vue.component(BaseSlider.name, BaseSlider)

For local usage

Copy
export default {
  components: {
    BaseSlider
  }
}

Examples

Slider

100.00


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

Range slider

200.00
400.00


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

Slider Props

PROP NAME TYPE DEFAULT DESCRIPTION
value String / Array / Number N/A slider value
disabled Boolean N/A whether the slider is disabled
start Number / Array N/A noUi Slider start
connect Boolean / Array [ true, false ] noUi Slider connect
range Object { “min”: 0, “max”: 100 } noUi Slider range
options Object {} noUi Slider options

Switch Events

NAME DESCRIPTION PARAMS
input triggers when the binding value changes the updated value