Vuetify — Customize Slider

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Disabled Slider

We can disable the slider with the disabled prop:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider disabled label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Readonly Slider

A slider can also be disabled with the readonly prop. The difference between disabled and readonly is that a read-only slider looks a regular one.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider readonly label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Icons

Icons can be added to a slider.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="sound" prepend-icon="mdi-plus"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    sound: 0,  
  }),  
};  
</script>

to add an icon to the left of the slider with the prepend-icon prop.

We can do the same with the append-icon prop to add the icon to the right.

Also, we can listen to clicks on icons with the @click:append and @click:prepend directives.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider  
          v-model="zoom"  
          prepend-icon="mdi-minus"  
          append-icon="mdi-plus"  
          @click:append="zoomIn"  
          @click:prepend="zoomOut"  
        ></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    zoom: 100,  
  }),  
  methods: {  
    zoomOut() {  
      this.zoom = this.zoom - 10 || 0;  
    },  
    zoomIn() {  
      this.zoom = this.zoom + 10 || 100;  
    },  
  },  
};  
</script>

We set the zoomIn and zoomOut methods as the values of the directives to change the value of this.zoom and the slider value.

Vertical Sliders

The vertical prop makes a slider display vertically.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" vertical label="Regular"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Thumb

We can display a label for the slider dot.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

The thumb-label prop displays the slider.

We can add a custom label by populating the thumb-label slot:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always">  
          <template v-slot:thumb-label="{ value }">{{ value }}</template>  
        </v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Conclusion

We can add sliders to let users set the value to what we want.