vue-nouislider-component

Vue.js component for Nouislider plugin.

Usage no npm install needed!

<script type="module">
  import vueNouisliderComponent from 'https://cdn.skypack.dev/vue-nouislider-component';
</script>

README

vue-nouislider

Simple Vue.js component for nouislider plugin.

Forked from https://github.com/poteralski/vue-nouislider

Usage:

const
  nouisliderComponent = require('vue-nouislider-component');

Vue.component('acme-component', {
  components: {
    nouisliderComponent
  }
});

Range slider

<nouislider
    :show-tooltips="false"
    :slider-low-limit="0"
    :slider-start-value.sync="startValue"
    :slider-end-value.sync="endValue"
    :slider-high-limit="10"
    :slider-step="1"></nouislider>

Single slider

<nouislider
    :show-tooltips="false"
    :slider-low-limit="0"
    :slider-end-value.sync="endValue"
    :slider-high-limit="10"
    :slider-step="1"></nouislider>

Single slider with tooltip

<nouislider
    :show-tooltips="false"
    :slider-low-limit="0"
    :slider-end-value.sync="endValue"
    :slider-high-limit="10"
    :slider-step="1"
    :slider-single-tooltip="singleSliderTooltip"></nouislider>

Single slider reversed direction

<nouislider
    :show-tooltips="false"
    :slider-low-limit="0"
    :slider-end-value.sync="endValue"
    :slider-high-limit="10"
    :slider-step="1"
    slider-direction="rtl"></nouislider>