Nuxt Sliders

Our Nuxt Sliders (customised 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 Nuxt Sliders examples and learn how to use this plugin.

Copy

import {Slider} from 'src/components'

Global usage

Copy

Vue.use(Slider)

For local usage

Copy

export default {
  components: {
    Slider
  }
}

Examples

Slider

You can specify one of the known types to customize the look and feel of the slider. Type can be default

primary

info

danger

warning

Copy

<template>
  <slider v-model="sliderValue">
  </slider>
</template>

<script>
  export default {
    data() {
      return {
        sliderValue: 30
       }
    }
  }
</script>

Range slider

Copy

<template>
  <slider v-model="rangeSlider"
          type="primary"
          :connect="true">
  </slider>
</template>

<script>
  export default {
    data() {
      return {
        rangeSlider: [20, 50]
       }
    }
  }
</script>

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	Number	Array	[ true, false ]	noUi Slider connect
range	Object	{ “min”: 0, “max”: 100 }	noUi Slider range
type	String	N/A	slider type (color)
options	Object	{}	noUi Slider options

You can pass any noUi Slider options via the ` options prop. They might overwrite start , connect and range` props if specified in the options object

For example, in this case:

Copy

  <slider :range="{min: 10, max: 50}" :options="{range: {min: 20, max: 40}}"

The options object will overwrite the range prop in this case.

Slider events

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