# Slider

Our customized noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.

Our base-slider component is a thin wrapper over noUiSlider (opens new window)

# Example

<base-slider v-model="sliders.slider1"></base-slider>
<script>
    export default {
      data() {
        return {
           sliders: {
              slider1: 0
           }
        };
      }
    };
</script>

# Range Slider

<base-slider v-model="sliders.slider2" :range="{min: 0, max: 500}"></base-slider>
<script>
    export default {
      data() {
        return {
           sliders: {
              slider2: [150, 400]
           }
        };
      }
    };
</script>

# Base Slider Props

Prop Name Type Default Description
value String | Array | Number N/A Slider value
disabled Boolean N/A Whether slider is disabled
range Object { "min": 0, "max": 100 } Slider range (defaults to 0-100)
type String N/A Slider type (e.g primary, danger etc)
options Object {} noUiSlider options

For more info check out Vue flatpickr (opens new window) and Flatpickr website (opens new window)

←