Below is the html code snippet that I currently have:
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
This code was taken from bootstrap 4 documentation (https://getbootstrap.com/docs/4.1/components/forms/#range-inputs) and it generates a result like this: https://i.sstatic.net/juVKW.png
I am looking to make the button hidden until someone interacts with the range input. Is there a way to achieve this?
Additionally, I plan on implementing this range input into 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>
The above code snippet was taken from the oTree documentation: