CODEWITHSUNDEEP
javascriptjquerycsshtml
Rejoanul Alam
Rejoanul Alam

Reputation: 5398

input range slider thumb js event

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

Upvotes: 0

Views: 426

Answers (1)

Temani Afif
Temani Afif

Reputation: 274385

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

Upvotes: 1

Related Questions