JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div id='container'>
    <div>
        <audio id='audioEl' src='http://www.cardonadesigns.com/html5/audio/all-is-illusion.mp3' controls>
    </div>
    <div>
        <input type='range' min='.5' max='1' value='1' step='.1' id='rangeEl'>
    </div>
    <div id='playbackRateValue'>playbackRate: 1</div>
</div>

CSS

#container{
    padding:20px;
}

JavaScript

$(document).ready(function(){
    $('#rangeEl').change(function(evt){
      $('#audioEl')[0].playbackRate = evt.srcElement.value;
      $('#playbackRateValue').text('playbackRate: ' + evt.srcElement.value);
    });
});