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