Vue noUiSlider

a Vue component for noUiSlider that is forked and intended to look like Vuetify sliders

Install

npm i vue-nouislider-fork

main.js

import VNus from "vue-nouislider-fork"; import Vue from "vue"; Vue.use(VNus);

Basic Usage

Template

<v-nus :config="config" :value="values" @update="values = $event" />

JS

data: {
  config: {
    connect: [true, true, true],
    connectColors: ["blue", "red", "orange"],
    range: {
      min: [0],
      max: [100]
    }
  },
  values: [25, 75]
}

Advanced Usage

Customize Handle/Thumb Colors

Accepts HEX, RGB and classes.
<v-nus
  :color="red"
  thumb-color="red"
  :thumb-show="true"
  :config="config"
  :value="values"
/>

Disable Slider

Disable the slider. <v-nus :config="config" :value="values" :disabled="true" />

Customize ID

Prefixed with 'v-nus'.
<v-nus :id="custom-id" :config="config" :value="values" />

Show Log

<v-nus :log="true" :config="config" :value="values" />

References

• Forked From vue-nouislider (horans)
• Vuetify
• Inspiration: VueJS-noUiSlider
• Linter: standard

Change Log