显示Bootstrap 4范围输入的值

Bootstrap 4 的范围输入（range input）通常用于允许用户在一定范围内选择数值。这个输入类型在 HTML5 中被引入，并且可以通过 Bootstrap 进行样式定制。

基础概念

范围输入是一种 HTML 输入元素，允许用户通过滑动条选择一个数值范围。在 HTML 中，它通过 <input type="range"> 来实现。

类型与应用场景

单滑动条：用于选择一个单一的数值。
双滑动条：用于选择一个数值范围。

应用场景包括但不限于：

音量控制
图片亮度调整
设置价格范围筛选
任何需要用户输入数值范围的场景

示例代码

以下是一个简单的 Bootstrap 4 范围输入示例，以及如何显示其值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Range Input</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <label for="rangeInput">选择数值:</label>
    <input type="range" class="form-control-range" id="rangeInput" min="0" max="100" step="1">
    <p>当前值: <span id="rangeValue">50</span></p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#rangeInput').on('input', function() {
        $('#rangeValue').text($(this).val());
      });
    });
  </script>
</body>
</html>