输入范围滑块Thumb js事件

Question

In input range slider I want to increase operable area size will increase when mouse over in thumb. I have tried this

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

Please help. Above is not working

Answer 1

I am not sure if you can catch the hover on the slider-thumb but here is an idea in case you want the hover on all the slider where you can rely on CSS variable to change some properties

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