html input range thumb smooth movement - html

Question

I have an HTML input range set up with a bunch of CSS changes to the appearance, and I was wondering if there was any way to make it smoothly change from wherever it is to where the user changes?
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 20px;
border-radius: 5px;
border: 1px solid;
background: none;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
transition: 0.4s all ease-out;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
background-color: #CCC;
border: solid 1px #333;
border-radius: 4px;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
cursor: pointer;
transition: 0.4s all ease-out;
}
input[type=range]:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0px 0px 13px 0px #444, 0px 0px 20px 0px #444 inset;
}
input[type=range]:hover::-webkit-slider-thumb {
border: solid 1px #444;
box-shadow: 0px 0px 15px 0px #444, 0px 0px 20px 0px #444 inset;
}
input[type=range]:focus {
background: rgba(255, 255, 255, 0.4);
box-shadow: 0px 0px 18px 0px #333, 0px 0px 15px 0px #333 inset;
}
input[type=range]:focus::-webkit-slider-thumb {
border: solid 1px #333;
box-shadow: 0px 0px 22px 0px #333, 0px 0px 15px 0px #333 inset;
}
<input type="range" id="brightness_slider" value="90" step="1" min="30" max="100">

Answer 1

These are the things that affect the smoothness:
The width of the banner
The min/max range
The size of steps
So if you have:
1000px wide range input
0 - 1000 range
Step size of 1
Each step will be just 1px, and it will be quite smooth.
If you have:
1000px wide range input
0 -100 range
Step size of 25
It will snap between the allowable values, appearing less fluid.
This is really a feature of the interaction between your step size and your range, and provides useful feedback to the user on what values are acceptable.

Answer 2

I realize this is quite old at this point but the solution I came up with I found was pretty elegant and easy to do so I thought I would share it.
First I had an indexed scroller to make it easier. For example, I had an array of values like the following:
myArray = [0, 100, 1000, 10000, 100000]
I set my input range min to 0, max to the number of items in the array 4. Then I set the step to .01 to get smooth scrolling.
On the input event I did the following:
index = Math.round(event * 1);
value = myArray[index];
And that's basically it, as you scroll it will be smooth, and the values will change in between the ranges as you would expect.