NoUiSlider

Use the required class varient (e.g. slider-secondary, slider-success, slider-warning, slider-danger, slider-dark ) for different background-color.

Vue Code

<template>
  <div ref="slider" :class="`slider slider-${variant}`" >
  </div>
</template>

//component usage
<NoUiSlider  variant="primary"/>
Script

<script>
import noUiSlider from 'nouislider'
export default {
  name: 'NoUiSlider',
  props: {
    variant: { type: String, default: 'primary' },
    twostartpoint: { type: Boolean, default: false }
  },
  mounted () {
      noUiSlider.create(this.$refs.slider, {
        start: 50,
        connect: [true, false],
        range: {
          min: 0,
          max: 100
        }
      })
  }
}
</script>
Range Slider
Vue Code
<template>
  <div ref="slider" :class="`slider slider-${variant}`" >
  </div>
</template>

//component usage
<NoUiSlider :twostartpoint="true"  variant="primary" />
Script

<script>
import noUiSlider from 'nouislider'
export default {
  name: 'NoUiSlider',
  props: {
    variant: { type: String, default: 'primary' },
    twostartpoint: { type: Boolean, default: false }
  },
  mounted () {
    if (!this.twostartpoint) {
      noUiSlider.create(this.$refs.slider, {
        start: 50,
        connect: [true, false],
        range: {
          min: 0,
          max: 100
        }
      })
    } else {
      noUiSlider.create(this.$refs.slider, {
        start: [20, 80],
        connect: true,
        range: {
          min: 0,
          max: 100
        }
      })
    }
  }
}
</script>
Previous Next