引导范围滑块介绍

引导范围滑块（Bootstrap Range Slider）是一种常用的UI组件，用于通过滑动条选择一个区间的值。它基于Bootstrap框架，易于使用且高度可定制，并且可以与jQuery等JavaScript库集成使用。

安装和引入

可以通过npm安装bootstrap和bootstrap-range-slider的库：

npm install bootstrap bootstrap-range-slider

在HTML中引入必要的CSS和JS文件：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-range-slider/bootstrap-slider.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/bootstrap-range-slider/bootstrap-slider.min.js"></script>

基本用法

引导范围滑块的基本用法非常简单。只需在一个容器内创建一个input元素，并在其上调用bootstrapSlider()函数即可。例如：

<div id="slider"></div>
<script>
  $("#slider").bootstrapSlider();
</script>

还可以设置一些选项，例如范围的最小值和最大值、初始值、步长等等。例如：

<div id="slider"></div>
<script>
  $("#slider").bootstrapSlider({
    min: 0,
    max: 100,
    value: [25, 75],
    step: 5,
    tooltip: 'always'
  });
</script>

事件和方法

引导范围滑块也支持一些事件和方法，以便更灵活地控制它的行为。例如：

<div id="slider"></div>
<script>
  var slider = $("#slider").bootstrapSlider({
    min: 0,
    max: 100,
    value: [25, 75],
    step: 5,
    tooltip: 'always'
  });
  slider.on('slide', function(event) {
    console.log(event.value);
  });
  slider.bootstrapSlider('setValue', [50, 80]);
</script>

示例

具体的代码示例可以参考 官方文档。