javascript - 输入范围 slider 拇指js事件

Question

在输入范围 slider 中，我想增加可操作区域的大小，当鼠标悬停在拇指上时会增加。这个我试过了

HTML

<input id="param1" type="range" min="0" max="1" step="0.1" class="slider-color">

查询

$('.slider-color::-webkit-slider-thumb').hover(function(){
    $('.slider-color::-webkit-slider-runnable-track').css('height','11px');
});

请帮忙。以上无效

Answer 1

我不确定您是否可以在 slider-thumb 上捕捉到悬停，但这里有一个想法，以防您希望悬停在所有 slider 上，您可以依靠 CSS 变量来更改一些 slider 属性

.slider-color:hover {
  --c:red;
  --h:40px;
}
.slider-color::-webkit-slider-runnable-track {
  background:var(--c,transparent);
  height:var(--h,initial);
}

<input id="param1" type="range" min="0" max="1" step="0.1" class="slider-color">