问题说明

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>
  1. 在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的初始值。

  1. 最后,您可以自定义样式来使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选择器了。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。