Javascript 在引导4中隐藏范围输入按钮？

我有以下html代码：

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

示例范围输入

我从bootstrap 4文档（）中借用了它，并得出以下结论：

我想隐藏按钮，直到有人单击该行。我们能做吗

另外，我想在我的OTRE代码中使用此范围输入：

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

比萨饼是最好的食物：
不同意
同意

---

它借用了oTree文档：

一个不使用JavaScript和html/css的可能解决方案：

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

---

请在您的问题中编写代码，添加进一步的解释，并尽可能避免外部链接，这样就不会被标记为低质量的问题。谢谢您的邮件-我不知道。非常感谢Alex。一旦我们点击线路，是否可以继续显示按钮？但解决方案有点粗糙。在JavaScript中更改/设置伪元素的样式并不是那么容易。我建议用另一个元素替换thumb，而不是使用style元素。我明白了，然后我会尝试。谢谢。

.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);
}