输入范围滑块拇指js事件

Question

在输入范围滑块我希望增加可操作区域大小将增加鼠标悬停在拇指。我试过这个

HTML

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

jQuery的

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

请帮忙。以上不起作用

Answer 1

我不确定你是否可以抓住slider-thumb上的悬停但是这里有一个想法，以防你想要悬停在所有滑块上你可以依赖CSS变量来改变一些属性

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