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

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
<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

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:

  <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