Hide range input button in bootstrap 4?

Question

I have the following html code:

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

which I borrowed from bootstrap 4 documentation (https://getbootstrap.com/docs/4.1/components/forms/#range-inputs) and yields the following:

I want to hide the button until a person clicks the line. Could we do it?

Ps. I want to use this range input in my oTree code:

<label class="col-form-label">
    Pizza is the best food:
</label>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Disagree</span>
    </div>

    <input type="range" name="pizza" min="1" max="5" step="1" class="form-control">

    <div class="input-group-append">
        <span class="input-group-text">Agree</span>
    </div>
</div>

which borrowed from oTree documentation: https://otree.readthedocs.io/en/latest/forms.html#widgets

Answer 1

One possible solution without JavaScript and html/css only:

<label class="col-form-label">
   Pizza is the best food:
</label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Disagree</span>
    </div>
    <div class="range">
        <input type="range" name="pizza" min="1" max="5" step="1" class="form-control 
        range-input">
    </div>
    <div class="input-group-append">
        <span class="input-group-text">Agree</span>
    </div>
</div>

Removed the platform-native styling and added some custom styling. Hopefully you can do something with that, too

.range-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 26px;
  height: 10px;
  width: 170px;
  background-color: rgb(74, 123, 197);
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 0;
  height: 0;
}

.range:active .range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

https://jsfiddle.net/Loywq146/