html - 我将如何在 bootstrap 4 中添加范围 slider 模型？

Question

我使用 Bootstrap 4 已经有一段时间了。我创建了一个带有 slider 的范围表单。我想添加模型( slider 顶部的小线条或数字以了解您选择的内容)，甚至是 slider 左侧或右侧的数字，但我不确定如何添加。这是代码:

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

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>