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 {Slider} from 'src/components'

Global usage

Vue.use(Slider)

For local usage

export default {
  components: {
    Slider
  }
}

Simple slider with v-model

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>

Show Code

Range slider

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

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

Show Code

With stops

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

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

Show Code

Disabled

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

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

Show Code

Slider Props

:::tip 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.

Switch events

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