Css 输入滑块（v滑块）死区上的标签

我有一个输入滑块，或者vuetify所指的

。我已经通过在滑块上添加标签完成了我想要的大部分工作，但问题是“产品”和“评级”标签会创建一个“死区”，如果我单击滑块，它不会进入标签上方的区域，我必须将其滑动到那里

这很难解释。尝试单击示例中的滑块，然后单击“汽车”或“炉子”。您将看到滑块需要拖动到它

加价

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

.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;
}