Скрыть кнопку ввода диапазона в начальной загрузке 4? - PullRequest
Новая
       26

Скрыть кнопку ввода диапазона в начальной загрузке 4?

1 голос
/ 15 октября 2019

У меня есть следующий HTML-код: 

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

, который я позаимствовал из документации по начальной загрузке 4 (https://getbootstrap.com/docs/4.1/components/forms/#range-inputs) и выдает следующее: enter image description here

Я хочу скрыть кнопку, пока человек не нажмет на строку. Можем ли мы это сделать?

Ps. Я хочу использовать этот диапазон ввода в моем коде 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

1 Ответ

1 голос
/ 16 октября 2019

Одно возможное решение без 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/

...