title: Input range slider animation CSS
body: <p>I'd like to see if it's possible to animate the <code>input[type="range"]</code> element for example for short audio files so the progress seems less 'stuttery'</p>
  
  <p><a href="https://codepen.io/liamtarpey/pen/gKzjLo?editors=1100" rel="nofollow noreferrer">Here's a codepen</a> with a short audio file that I've been using to try to come up with solutions</p>
  
  <p>This question is specifically for <code>input[type="range"]</code>, I do not want to use custom elements to build animated progress bars, I know that is possible but for this particular use case I'm stuck with the range element.</p>
  
  <p>Any ideas?</p>
  
  <p><a href="https://i.stack.imgur.com/69bn0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69bn0.png" alt="Range input lives natively in the shadow root of audio element"></a></p>