HTML input range thumb smooth stroke

Question

I have an HTML input range created with a bunch of CSS changes to the look, and I was wondering if there is any way to make it smooth change from where it 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

This is what affects smoothness:

• Banner width
• Min / max range
• Step size

So, if you have:

• 1000px wide input range
• 0 - 1000 range
• Step size 1

Each step will be only 1px and it will be pretty smooth.

If you have:

• 1000px wide input range
• 0-100 range
• Step Size 25

It snaps between acceptable values, providing less fluid.

This is truly a function of the interaction between step size and range and gives the user useful feedback on acceptable values.