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.

import {Slider} from 'src/components'

Global usage

Vue.use(Slider)

For local usage

export default {
  components: {
    Slider
  }
}

Examples

Slider

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

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

Range slider

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

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

Slider props

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:

  <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