Bootstrap V3没有内置Range范围选择器,该如何实现Range？

问题说明

Bootstrap v3没有内置的范围选择（Range）选择器。但是，您可以使用jQuery UI的slider插件来实现这一点。您可以自定义样式，并将其与Bootstrap一起使用。另外，Bootstrap v4中有一个内置的range选择器。

解决方案

要使用jQuery UI的slider插件来实现range，请遵循以下步骤：

1. 在您的项目中包含jQuery和jQuery UI库文件。
2. 在HTML中创建一个包含两个输入框和一个空元素的div，用来展示slider。

<div>
  <input type="text" id="min-value">
  <input type="text" id="max-value">
  <div id="slider-range"></div>
</div>

3. 在JavaScript中初始化slider，并将其链接到两个输入框（min-value和max-value）。

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [25, 75],
    slide: function(event, ui) {
      $("#min-value").val(ui.values[0]);
      $("#max-value").val(ui.values[1]);
    }
  });
  $("#min-value").val($("#slider-range").slider("values", 0));
  $("#max-value").val($("#slider-range").slider("values", 1));
});

在这个例子中，我们将slider定义为一个范围选择器，最小值为0，最大值为100，初始值为25和75。当拖动slider时，我们更新两个输入框的值。还要注意，在初始化时，我们将两个输入框的值设置为slider的初始值。

4. 最后，您可以自定义样式来使slider与Bootstrap主题匹配。

在这个例子中，您可以添加以下CSS：

#slider-range {
  width: 100%!;(MISSING)
  margin-top: 10px;
}

.ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}

.ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 100%!;(MISSING)
  font-size: .7em;
  display: block;
}

.ui-slider-range-min {
  background-color: #337ab7;
}

.ui-slider-range-max {
  background-color: #337ab7;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.5em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%!;(MISSING)
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

这里我们定义了slider的基本样式和Bootstrap主题的颜色。

这样，您就可以使用jQuery UI的slider插件来实现range选择器了。

管理员会员

收藏 海报 链接