Home How do I change the color of the text in the thumb-label of the Vuetify v-slider component?

Questions

How do I change the color of the text in the thumb-label of the Vuetify v-slider component?

January 22, 2024

I have been struggling for a bit now, and my goal is to give the thumb label of my v-slider a custom color, defined in the part of my component. How do I do that?

Thanks, Joost

>Solution :

If you Inspect Element using Chrome DevTools you can usually find which classes need css applying to it. In this case, it’s .v-slider-thumb__label. To access these classes (in a scoped style section), you need a :deep selector:

<style scoped>
  :deep(.v-slider-thumb__label) {
    background-color: red;
  }
  :deep(.v-slider-thumb__label::before) {
    color: red;
  }
</style>

If you need it to reflect a color defined in your script, you can do as follows:

<script setup>
  //...

  const color = ref('red')
</script>

<style scoped>
  :deep(.v-slider-thumb__label) {
    background-color: v-bind(color);
  }
  :deep(.v-slider-thumb__label::before) {
    color: v-bind(color);
  }
</style>