# Slider

<template lang="html">
  <div class="">
    <vs-slider v-model="value1"/>
    <vs-slider disabled="true" v-model="value2"/>
    <vs-slider max=200 v-model="value3"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:67,
      value2:34,
      value3:60
    }
  }
}
</script>

<template lang="html">
  <div class="centerx">
    <input type="color" v-model="colorx" name="" >
    <vs-slider :color="colorx" v-model="value1"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorx:'#db7d12',
      value1:24
    }
  }
}
</script>

<template lang="html">
  <div class="">
    <vs-slider step=10 v-model="value1"/>
    <vs-slider ticks step=25 v-model="value2"/>
    <vs-slider ticks step=0.5 :step-decimals="true" v-model="value3"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:60,
      value2:25,
      value3: 25.5
    }
  }
}
</script>

<template lang="html">
  <div class="">
    <vs-slider step=10 v-model="value1"/>
    <vs-slider ticks step=25 v-model="value2"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:60,
      value2:25
    }
  }
}
</script>

<template lang="html">
  <div class="">
    <vs-slider icon="volume_up" max=10 v-model="value1"/>
    <vs-slider icon="group_add" ticks step=25 v-model="value2"/>
    <vs-slider icon="star" ticks max=5 v-model="value3"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:60,
      value2:25,
      value3:[2,4]
    }
  }
}
</script>

<template lang="html">
  <div class="">
    <vs-slider color="success" text-fixed=% v-model="value1"/>
    <vs-slider color="danger" text-fixed=Min ticks step=25 v-model="value2"/>
    <vs-slider color="dark" text-fixed=K ticks max=5 v-model="value3"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:6,
      value2:25,
      value3:[2,4]
    }
  }
}
</script>

<template lang="html">
  <div class="centerx">
    <vs-slider :min="50" @change="cambio" color="rgb(45, 208, 129)" v-model="value1"/>
    <div :style="{'width':widthx+'px','height':heightx+'px'}" class="cuadrox">
      {{value1}}
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:55,
      widthx:55,
      heightx:55
    }
  },
  methods:{
    cambio(value){
      this.widthx = value
      this.heightx = value
    }
  }
}
</script>

<style lang="css">
  .cuadrox {
    padding: 10px;
    background: rgb(45, 208, 129);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 20px;
    border-radius: 10px;
  }
</style>