<div class="container">
  <div class="prefilled">
    <div class="tick"></div> 
  </div>
  <input
     type="range"
     min="0"
     max="100"
     step="1"
     value="20"
  >
</div>

<a href="https://phare.io/blog/recreating-laravel-clouds-range-input-with-native-html/" target="_blank">Source article</a>

.container, a {
  display: flex;
  align-items: stretch;
  padding: 60px 80px;
  max-width: 450px;
}

.prefilled {
  position: relative;
  width: 64px;
  height: 12px;

  border-top-left-radius: calc(infinity * 1px);
  border-bottom-left-radius: calc(infinity * 1px);
  background-color: black;
}

.tick {
  position: absolute;
  width: 4px;
  height: 16px;
  right: -10px;
  top: -2px;
  border-radius: calc(infinity * 1px);
  background-color: black;
}

input[type="range"] {
  position: relative;
  appearance: none;
  flex: 1 1 0%;
  height: 0.75rem;
  background-repeat: no-repeat;
  cursor: pointer;
  border-top-right-radius: calc(infinity * 1px);
  border-bottom-right-radius: calc(infinity * 1px);
  background-color: #e0e1e6;
  background-size: 20% 100%, 100% 100%;
  background-image: repeating-linear-gradient(135deg, black 0px, black 1px, #99a1af 1px, #99a1af 4px);
  box-shadow:
    #000 10px 0px 0px 0px inset,
    #000 0px 1px 0px 0px inset,
    #000 0px -1px 0px 0px inset,
    #000 -1px 0px 0px 0px inset;
}

input[type="range"]::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: calc(infinity * 1px);
  border: none;
  background-color: #ffffff;
  appearance: none;
  
  box-shadow:
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset; 
}

input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: calc(infinity * 1px);
  border: none;
  background-color: #ffffff;
  appearance: none;
  
  box-shadow:
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset,
    #000 0px 0px 1px 0px inset; 
}

document.getElementsByTagName("input")[0].addEventListener('input', function (event) {
  let input = event.target
  let value = parseInt(input.value)
  let min = parseInt(input.getAttribute('min'))
  let max = parseInt(input.getAttribute('max'))
  
  let percentage = (value - min) / (max - min) * 100
 
  input.style.backgroundSize = `${percentage}% 100%, 100% 100%`
})