<div class="range-wrap">
      <input id="range" type="range" min="1" max="22" value="12" step="1" />
      <div class="range-value" id="rangeV"></div>
    </div>

$color_1: #fff;
$font-family_1: verdana;

body {
  min-height: 100vh;
  padding: 0 10vh;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type="range"] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid #00000050;
  border-radius: 1rem;
  &:focus {
    outline: none;
    &::-webkit-slider-runnable-track {
      background: lightgray;
    }
  }
  &:hover ~ .range-value{
    display: block;
  }
  &:active ~ .range-value{
    display: block;
  }
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 2rem;
    cursor: pointer;
    background: lightgray;
    border-radius: 1rem;
  }
  &::-webkit-slider-thumb {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    border: 0.5rem solid #94DD26;
    background: #fff;
    box-shadow: -2000px 0 0 1985px #94DD26;
    cursor: pointer;
    -webkit-appearance: none;
    
    &:hover{
      border: 0.25rem solid #94DD26;
    }
    &:active{
      border: 0.25rem solid #94DD26;
    }
  }
}
.range-wrap {
  width: 100%;
  position: relative;
}
.range-value {
  display: none;
  position: absolute;
  top: -30%;
  span {
    width: fit-content;
    height: auto;
    font-family: $font-family_1;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background: #000;
    color: $color_1;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 1rem;
    &:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 10px solid #000;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      margin-top: -1px;
    }
  }
}

      const range = document.getElementById("range"),
        rangeV = document.getElementById("rangeV"),
        setValue = () => {
          const newValue = Number(
              ((range.value - range.min) * 100) / (range.max - range.min)
            ),
            newPosition = 16 - newValue * 0.32;
          rangeV.innerHTML = `<span>${range.value}/22</span>`;
          rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
        };
      document.addEventListener("DOMContentLoaded", setValue);
      range.addEventListener("input", setValue);