Label over input slider (v-slider) deadzone

I have an input slider, or <v-slider> as it is referred to by vuetify. I've accomplished mostly what I want by getting labels over the slider, but the problem is that the "product" and "rating" labels create a "dead zone" where if I click on the slider, it doesn't go to the area over the labels, I have to slide it there.

It's hard to explain. Try clicking on the slider in the example and then click on "car" or "stove". You'll see the slider needs to be dragged to it.

Mark up

<div class="work" v-for="(product, index ) in products" v-bind:key="index">
    <v-slider
        v-model="product.intensity"
        class="align-center"
        style="margin-bottom: 1px;"
        :max="max"
        :min="min"
        hide-details
        height='42px'
        :track-color="trackColour(index)"
        thumb-color="transparent"
    >
        
    </v-slider>
    <div class="product" v-bind:class="{ active: isActive }" style="">{{product.label}}</div>
    <div class="range" v-bind:class="{ active: percentOn }">{{product.rating}}%</div>
</div>

CSS

.v-slider__track-container {
  height: 42px !important;
}

.v-slider__thumb {
  width: 60px;
  height: 40px;
  left: -30px;
}
.work {
  position: relative;
}
.product {
  
  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;


  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.range {

  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
  position: absolute;

  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
}

.active {
  color: white;
}

Here's my codepen example.