Sliders

---

We restyled [noUI Slider](https://refreshless.com/nouislider/) and gave it a fresh look. We have a small Vue wrapper over it which makes it very easy to use it.

To use it, import it from the components folder

import BaseSlider from '@/components/BaseSlider'

Global usage

Vue.component(BaseSlider.name, BaseSlider)

For local usage

export default {
  components: {
    BaseSlider
  }
}

Simple slider with v-model

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

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

Show Code

Range slider

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

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

Show Code

With stops

<template>
  <base-slider v-model="sliderValue" :options="{step: 10}"
            >
  </base-slider>
</template>

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

Show Code

Disabled

<template>
  <base-slider v-model="disabledSliderValue" disabled>
  </base-slider>
</template>

<script>
  export default {
    data() {
      return {
        disabledSliderValue: 50,
       }
    }
  }
</script>

Show Code

Slider Props

:::tip You can pass any noUi Slider options (opens new window) via the options prop. They might overwrite start, connect and range props if specified in the options object. :::

For example, in this case:

<base-slider :range="{min: 10, max: 50}" :options="{range: {min: 20, max: 40}}"></base-slider>

The options object will overwrite the range prop in this case.

Switch events

Name	Description	Params
input	triggers when the binding value changes	the updated value