# Slider


We used nouislider Sliders and restyled them To use it, import it from components
import {Slider} from 'src/components'
1

Global usage

Vue.use(Slider.name, Slider)
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Slider Props