how to transition an input slider smoothly when a discrete jump of the value takes place-CodePudding

I have a basic html input slider. This slider is controlled by some other UI element. This means that it can jump discreetly in value.

For example, if the current value is 100, it can be set to 500 by the other UI element.

In such a scenario, is it possible to get the slider to smoothly transition from 100 to 500? Perhaps by steps of 10 or even 1?

EDITED:

I am using react. I tried to use setInterval to update the useState that holds the value for the slider, but it doesn't work

CodePudding user response：

Here's a very basic implementation of a linear interpolation with an interval. You can change _interpSpeed and the interval timer to whatever you like to make the animation faster or slower. _interpSpeed is the step size and the interval timer is the step frequency (currently set to 60fps).

const _interpSpeed = 5;
var interval = setInterval(()=>{
  let range = document.querySelector("input[type=range]");
  
  //If we don't have a value to interp to, just return
  if(range.newValue === undefined)
    return;
    
  //Convert the string value to an integer
  let value = parseInt(range.value);
  
  //Determine whether we need to add or subtract
  let delta = range.newValue - value;
  let sign = delta / Math.abs(delta);
  
  //Add the designated interp amount (linear)
  let v = value   sign * _interpSpeed;
  
  //Prevent exceeding the minimum or maximum of the range
  if(v > parseInt(range.max)) v = parseInt(range.max);
  else if(v < parseInt(range.min)) v = parseInt(range.min);
  
  //Prevent going past the desired value
  else if(v > range.newValue && sign > 0) v = range.newValue;
  else if(v < range.newValue && sign < 0) v = range.newValue;
  
  //Update the value
  range.value = v;
  
  //If we've reached the desired value, delete the desired value 
  //so the interval will return at the top of the function.
  if(range.value == range.newValue)
    delete range.newValue;
}, 1000/60);

document.querySelector("input[type=number]").addEventListener("keyup", function(){
  let v = parseInt(this.value);
  if(Number.isNaN(v))
    v = 0;
  let range = document.querySelector("input[type=range]");
  range.newValue = v;
});

input[type="range"]
{
  width: 100%;
}

Pick a number between 0 and 500
<input type="number" value="250" min="0" max="500"/>
<br><br>
<input type="range" value="250" min="0" max="500"/>