Как добавить макеты слайдера диапазона в bootstrap 4?

Question

Я немного поигрался с Bootstrap 4. Я создал форму диапазона с помощью ползунка. Я хотел бы добавить макеты (маленькие строки или цифры сверху слайдера, чтобы знать, что вы выбираете) или даже число слева или справа от слайдера, но я не уверен, как. Вот код:

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

Я пытался использовать тег datalist, но, похоже, он не работает ... Как можно это сделать?

Answer 1

Bootstrap 4 реальный диапазон типов ввода будет таким:

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

наконец добавьте функцию javascript (используйте jQuery)

$(document).ready(function(){
    $('#ex6').on('change', function(e){
        var id = e.target.value;            
        document.getElementById("ex6Val").innerHTML = id;
    });
    $('#ex6').change();
});

Проверьте фрагмент

$('#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;
});