javascript - 在 bootstrap 4 中隐藏范围输入按钮？

Question

我有以下 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 文档 ( https://getbootstrap.com/docs/4.1/components/forms/#range-inputs ) 借来的，并产生以下内容:

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

附言。我想在我的 oTree 代码中使用这个范围输入:

<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 文档:https://otree.readthedocs.io/en/latest/forms.html#widgets

Answer 1

一个没有 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>

删除了平台原生样式并添加了一些自定义样式。希望你也能用它做点什么

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