JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filter">
  <input type="range" name="page" orient="vertical" step="20" list="pagelist" />
    <datalist class="pagelist">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
    </datalist>
</div>

CSS

input[type=range]:focus {
  outline: none;
}

#filter {
  position: sticky;
  position: -webkit-sticky;
}

#filter input[type=range][orient=vertical] {
  writing-mode: bt-lr;  /* IE */
  -webkit-appearance: none;
  width: 196px;
  /* position: sticky;
  position: -webkit-sticky;
  top: 100px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);90度回転 */
}

/* Chrome */
#filter input[type=range]::-webkit-slider-runnable-track {
  height: 13px;
  background:...