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>