To draw attention to the user, I need the range slider button to float up and down until hovered, or clicked on by the user.
Then, when hovered it pauses its vertical movement.
When clicked on it altogether stops.
The max value for the range slider is 100, the min is 0, and the default is 50.
So, it should float at the position of 50.
What I have tried:
The following code is what I have, but instead of floating by default, the range slider appears hidden... any suggestions?
Here's the HTML:
<pre><div id="slider-container">
<input type="range" id="myRange" min="0" max="100" value="50">
</div>
Here's the JS:
var slider = document.getElementById("myRange");
var container = document.getElementById("slider-container");
slider.classList.add("floating");
slider.addEventListener("mouseover", function() {
if (slider.classList.contains("floating")) {
slider.classList.remove("floating");
} else {
slider.classList.add("floating");
}
});
slider.addEventListener("click", function() {
if (slider.classList.contains("floating")) {
slider.classList.remove("floating");
}
});
Here's the CSS:
#slider-container {
position: relative;
}
#myRange::-webkit-slider-thumb {
transition: all 0.3s ease-in-out;
}
#myRange.floating::-webkit-slider-thumb {
position: relative;
top: -30px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}