Component "RangeInput.jsx" in the AdvancedExample page is completely inaccessible

[OwenEdwards]

The RangeInput.jsx component (https://github.com/videojs/videojs.com/blob/main/src/components/RangeInput.jsx) creates a range slider made out of <span>s and <div>s which is not accessible for keyboard-only users, and does not have any markup to label its name, role, and state/value for screen reader users:

<div class="RangeInput__Wrapper-sc-1cg2h3q-0 fyFmFx">
  <div class="RangeInput__Labels-sc-1cg2h3q-1 gyjvOD">
    <span>Volume</span>
    <span>39</span>
  </div>
  <div class="css-vwoj9o">
    <div class="css-v50dlc" style="width: 39%;"></div>
    <div class="css-inwnox" style="top: 0%; left: 39%;"></div>
  </div>
</div>

[gkatsev]

Thanks for looking at this @OwenEdwards, it used to be an input element (https://github.com/videojs/videojs.com/pull/51/files#diff-54f365e81aca3df342aebdf40990d609f3380c435c13d66f80e3555e64432e8aR82) but then @mmcc changed in the website rewrite 😜