html – make hidden thumb appear where clicked on range input slider

I want to make a range input (slider) where the thumb is hidden initially and shows up when and where people click on the track. This is very similar to question: How to make CSS input range thumb not appear at first

$('.unclicked').click(function(e) {
  $(this).removeClass('unclicked');
  $(this).addClass('clicked');
});
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background: #ddd;
  outline: none;
}

.unclicked::-webkit-slider-thumb {
  display: none;
}

.clicked::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: red;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="-5" max="5" step="0.2" class="unclicked" style="margin-left:0%; margin-right:0%; width:100%" onclick="sliderClick(this)">

Everything works as intended but with one problem – the thumb does not show up where I click but in the middle instead.

Does anyone have an idea why and how it can be solved? Thanks a lot!

70 thoughts on “html – make hidden thumb appear where clicked on range input slider”