Click here to Skip to main content
15,796,738 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
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:
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");

// Add floating class by default
slider.classList.add("floating");

// toggle floating class on hover
slider.addEventListener("mouseover", function() {
  if (slider.classList.contains("floating")) {
    slider.classList.remove("floating");
  } else {
    slider.classList.add("floating");
  }
});

// remove floating class on click
slider.addEventListener("click", function() {
  if (slider.classList.contains("floating")) {
    slider.classList.remove("floating");
  }
});


Here's the CSS:
CSS
#slider-container {
  position: relative;
  /* other styling */
}

#myRange::-webkit-slider-thumb {
  transition: all 0.3s ease-in-out;
  /* other styling */
}

#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);
  }
}
Posted
Updated 20-Jan-23 5:35am
Comments
Member 15627495 18-Jan-23 10:11am    
you may need "z-index" for a higher stack with the animated element.

and to go all over the screen : "position:absolute;" with "top" / "left" coordinates.

if you stay in the container , use the 'width' and 'height' of the container, and those for the moving elements.
e-driver1 19-Jan-23 6:28am    
Can you elaborate on this?

1 solution

The above comment is really answering the question, but it is a bit of a guessing game - is the "slider-container" the parent or the child element.

If parent, your position should be absolute and all other children as relative.

Either remove this for now to test and I am sure your scroll will display.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900