Bootstrap V3没有内置Range范围选择器,该如何实现Range?-砝码网

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>
  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选择器了。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享