JSFiddle - React, Tailwind, and code Playground

HTML

<form class="slide-bar" method="get" id="slide">
      <div class="rangecontainer">
        <input type="range" min="0" max="38" value="20" class="slider" id="slider" oninput="myFunction()">
      </div>
</form>

SASS

.rangecontainer
  @media (hover: none)
    display: none
  display: flex
  width: 100%
  .slider
    @media only screen and (max-width:1500px)
      padding-bottom: 5%
    padding: 1% 2% 1% 2%
    margin: 0 23% 0 23%
    outline: none
    -webkit-appearance: none
    height: 1em
    border-radius: 0
    cursor: pointer
    opacity: 1
    width: 70em
    opacity: 1
    &::-webkit-slider-thumb
      background-color: #000000
      clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
      height: 100%
      width: 50%
      padding: 0
      opacity: 0.8
    &::-moz-range-thumb
      background-color: #000000
      clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
      height: 100%
      width: 50%
      padding: 0
      opacity: 0.8
    &::-webkit-slider-runnable-track
      background: #b8b8b8
      height: 0.25em
    &::-moz-range-track
      background: #b8b8b8
      height: 0.25em