Slider

Change the values with very good UX.

Default

To implement a Slider we have the vs-slider component.

<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>

Color

You can change the slider's color with the property color. You can also add the main colors like: primary, success,danger, warning,dark.

<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>

Ticks

With Ticks you can allow the user to select a value inside a range of allowed values. With the property step you can change the distance between each Tick. If you want decimal steps, just set the property step-decimals to true.

<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>

Range

With Range you can allow the user to select a range inside a range of allowed values. You can use the v-model property with Array and a minimum and maximum value ​​represented as: [min, max]

<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>

Icons

You can add an icon with the icon property to better representation the sliders to the user.

::: tip Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page (opens new window). Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. :::

<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>

Text Fixed

Determine the text that will be fixed next to the value with the property text-fixed

<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>

Change Method

You can add a function that will be triggered every time the value changes with @change="MyFunction"

:::tip You can change the minimum or maximum number admitted with the properties

• min
• max :::

55

<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>