输入范围滑块拇指js事件

【问题标题】：input range slider thumb js event输入范围滑块拇指js事件
【发布时间】：2019-07-27 17:39:40
【问题描述】：

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

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

请帮忙。以上无效

【问题讨论】：

标签： javascript jquery css html

【解决方案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);
}

&lt;input id="param1" type="range" min="0" max="1" step="0.1" class="slider-color"&gt;

【讨论】：

当我将鼠标悬停在滑块上时，它会改变高度。我希望它悬停在拇指而不是滑块上
@RejoanulAlam 是的，正如我所说，我不认为你可以抓住拇指上的悬停，所以我提供了一个在整个滑块上悬停的解决方案