How to add Slider similar to a volume bar to the player

[ubello64]

Hello all, I was wondering how I would go about adding a slider ( a small one that I can toggle between two states - on and off) to the control bar. I understand how a button can be added. here is some code I have written

createAutoPlayToggleButton: function () {
      const toggleAutoPlay = this.toggleAutoPlay

      const VjsButton = videojs.getComponent('Button')
      class autoPlayToggleButton extends VjsButton {
        handleClick() {
          toggleAutoPlay()
        }

        createControlTextEl(button) {
          // button.classList.add('vjs-button-spinner')
          button.title = 'Auto Play (a)'

          const div = document.createElement('div')
          div.id = 'autoPlay'
          div.className = 'vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal'

          button.appendChild(div)

          return div
        }
      }

      videojs.registerComponent('autoPlayToggleButton', autoPlayToggleButton)
    },

I was playing around with this css style:

#autoPlay .vjs-volume-bar.vjs-slider-horizontal{
  width: 2em;
  height: 0.4 em;
  position: relative;
  top: -2px;
}

Here is a screenshot of how a rough draft looks (the empty grey block) :

So it looks like this other volume bar , that I added through the above function ,shows up but the style does nothing to format it.
Also wondering if there is a way to add a text label to a slider.
Any feedback or suggestions would be greatly appreciated