Как с помощью HTML + CSS верстки возможно сделать input range вот такой формы?

/* Only for demo */ body { margin: 0; height: 100vh; background-color: #2b2829; background-image: url("https://i.stack.imgur.com/m9NKc.png"), radial-gradient(#2b2829, #000f); /* https://i.stack.imgur.com/yPbjO.png */ background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; justify-content: space-around; align-items: center; }

.wrap { /* Обводка */
  filter: drop-shadow(0px 0px 1px #431385) drop-shadow(0px 0px 1px #431385) drop-shadow(0px 0px 1px #431385) drop-shadow(0px 0px 2px #431385);
}

.meter { /* Размеры и форма */
  width: 242px; height: 26px;
  clip-path: polygon( 0 100%, 10% 0, 25% 0, 23% 19%, 49% 19%, 51% 0, 100% 0, 90% 100%, 80% 100%, 82% 82%, 55% 82%, 53% 100%);
}
/* Для -webkit- */
input[type="range"] {
  appearance: none; outline: none;
  background-color: #171619;
  box-shadow: inset 0 0 10px #0008;
}
input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; height: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 0;
  box-shadow: -100vw 0 0 100vw #6001ff;
}
/* Для -moz- */
input[type="range"]::-moz-range-progress {
  background-color: #6001ff; height: 100%;
}
input[type="range"]::-moz-range-track {
  background: transparent;
}
input[type="range"]::-moz-range-thumb {
  appearance: none; width: 0; border: none;
}

<div class="wrap"><input type="range" class="meter"></div>