# Slider

We used nouislider Sliders and restyled them To use it, import it from components

import {Slider} from 'src/components'

Global usage

Vue.use(Slider.name, Slider)

For local usage

export default {
  components: {
    [Slider.name]: Slider
  }
}

1
2
3
4
5

# Simple slider with v-model

:::tip You can add one of select-default|primary|info|danger|warning classes to customize the color of the slider. :::

<template>
  <slider class="slider-success"
             v-model="simple">
  </slider>
</template>
<script>
  export default {
    data() {
      return {
      simple: 30,
      }
    }
  }
</script>

# Range slider

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

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

# Slider Props

← Radio buttons Switch →