I have the following html input tags.
$("input[type='range']::-webkit-slider-thumb").on('hover', function () {
//...
});
input[type="range"] {
height: 0.5rem;
box-shadow: 0 0 0.25rem gray;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 100%;
background: #7CB5EC;
box-shadow: 0 0 0.375rem gray;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 100%;
background: #7CB5EC;
box-shadow: 0 0 0.375rem gray;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <input id="my-range" type="range" min="0" max="100">
I want to get the hover event via JavaScript whenever the user hovers over only the thumb.
I tried doing it like above but it didn't trigger the event. Any help would be greatly appreciated.
Thanks in advance.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I strongly believe that you can't do this using the default html input scope, you have to use a custom input scope like this:
$("#slider").slider({ range: "min", min: 0, max: 100, change: function( event, ui ) { console.log(ui.value); } }); $(".ui-slider-handle").on("mouseover", function() { console.log("Hover on thumb!"); })#slider{ width: 200px; margin-left: 20px; border-radius: 100px; height: 10px; background: #efefef; } .ui-slider-handle { background: #0976f7 !important; border-radius: 100px !important; } .ui-widget-header{ background: #0976f7 !important; }