@vcl/vcl/slider/demo/example-states.html

The whole VCL in one package

<p>
Focused:
</p>

<div class="slider focused" role="slider" tabindex="0" touch-action="pan-y" aria-valuemin="0" aria-valuemax="100" value="25">
  <div class="slider-rail">
    <div class="slider-scale row justify-between">
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
    </div>
    <div class="slider-knob-container" style="left: 25%;">
      <div class="slider-knob"></div>
    </div>
  </div>
  <div class="slider-scale row justify-between">
     <div class="slider-scale-point-label">empty</div>
     <div class="slider-scale-point-label">1/4</div>
     <div class="slider-scale-point-label">half</div>
     <div class="slider-scale-point-label">3/4</div>
     <div class="slider-scale-point-label">full</div>
  </div>
</div>

<p>
Disabled:
</p>

<div class="slider disabled" role="slider" tabindex="-1" touch-action="pan-y" aria-valuemin="0" aria-valuemax="100" value="25">
  <div class="slider-rail">
    <div class="slider-scale row justify-between">
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
      <div class="slider-scale-point-mark"></div>
    </div>
    <div class="slider-knob-container" style="left: 25%;">
      <div class="slider-knob"></div>
    </div>
  </div>
  <div class="slider-scale row justify-between">
     <div class="slider-scale-point-label">empty</div>
     <div class="slider-scale-point-label">1/4</div>
     <div class="slider-scale-point-label">half</div>
     <div class="slider-scale-point-label">3/4</div>
     <div class="slider-scale-point-label">full</div>
  </div>
</div>