Блог

У меня есть ползунок ввода, или <v-slider> , как его называет 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>
 

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

Вот мой пример codepen.