javascript - html - make hidden thumb appear where clicked on range input slider

Question

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)">

question from:https://stackoverflow.com/questions/65934409/html-make-hidden-thumb-appear-where-clicked-on-range-input-slider

Answer 1

Looks like this has to do with the thumb being hidden via display: none.

Hide it by using opacity: 0 instead, and it should work:

(Tested as working in a Chromium-based browser; does not appear to work in Firefox. But then so didn’t your original example to begin with.)

$('.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 {
  opacity:0;
}

.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%">