CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Henshall
Henshall

Reputation: 169

Add Icon into Thumb Vuetifyjs Tick Slider

I'm looking to add an icon, whether it is an SVG Icon or Fontawesome, I do not mind.

This is the vuetifyjs code im using

    <v-slider
      v-model="value"
      :tick-labels="ticksLabels1"
      class="step-slider"
      height="20px"
      :max="4"
      :color="ex1.color"
      :track-color="ex2.color"
      :thumb-color="ex3.color"
      step="1"
      tick-size="0"
    ></v-slider>

This is what I'm trying to achieve.

enter image description here

Any help is very much appreciated.

Thanks.

Upvotes: 1

Views: 1252

Answers (1)

Henshall
Henshall

Reputation: 169

If anyone is struggling, I've managed to do it using CSS.

.v-slider__thumb:after {
    content: url();
    display: block;
    width: 18px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 1px;
}

This is code that worked for me.

Jake.

Upvotes: 1

Related Questions