How would I add range slider mockups in bootstrap 4? - html

Question

I have been playing with Bootstrap 4 for a bit. I have created a range form with a slider. I would like to add mockups (little lines or numbers on top of the slider to know what you are selecting) or even a number left or right of the slider, but I am not sure how. Here is the code:
<div class="form-group">
<label for="range">How many flags would you like?</label>
<input class="form-control-range" type="range" name="flag_number" id="range" list="range">`
</div>
I have tried using the datalist tag, but it doesn´t seem to work... How would one do it?

Answer 1

Bootstrap 4 real input type range will be like this
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
and add some text for the display the value with this code :
<span>Current Slider Value: <span id="ex6Val"></span></span>
finally add the javascript function (use jQuery)
$(document).ready(function(){
$('#ex6').on('change', function(e){
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
});
Check the snippet
$('#ex6').on('change', function(e) {
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="form-group">
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
<span>Current Slider Value: <span id="ex6Val"></span></span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});