Question

我想根据需要自定义我的jQuery滑块。我暂时做了：

$('#flat-slider').slider({
  range: true,
  values: [30, 100],
  min: 0,
  max: 100,
  slide: function(event, ui) {
      if(ui.value > 75 && ui.value <= 100){
          return false;
      }
      if(ui.value >= 0 && ui.value <= 25){
          return false;
      }
  }
});

.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
  border-radius: 0;
}

.flat-slider.ui-slider {
  border: 0;
  background: #9c27b0;
  border-radius: 7px;
}

.flat-slider.ui-slider-horizontal {
  height: 3px;
}

.flat-slider.ui-slider-vertical {
  height: 15em;
  width: 3px;
}

.flat-slider .ui-slider-handle {
  width: 15px;
  height: 15px;
  background: #9c27b0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.flat-slider.ui-slider-horizontal .ui-slider-handle {
  top: 50%;
  margin-top: -7.5px;
}

.flat-slider.ui-slider-vertical .ui-slider-handle {
  left: 50%;
  margin-left: -7.5px;
}
.ui-slider-handler:last-child{
  display:none !important;
  background-color:red;
}

.flat-slider .ui-slider-range {
  border: 0;
  border-radius: 7;
  background: #D4B056;
}

.flat-slider.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 3px;
}

.flat-slider.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 3px;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">

<div class="flat-slider" id="flat-slider"></div>

我希望有这样的东西：

此刻，我被困在隐藏第二个处理程序并确定范围1和2。如果隐藏第二个处理程序，则无法移动第一个处理程序。我不知道是否可以定义我的范围。

在jsfiddle上结果不同

http://jsfiddle.net/myLpqrxw/5/

编辑：

我做了这个： http://jsfiddle.net/myLpqrxw/11/

我需要更改禁用范围[0, 172]和[400, 500]的颜色

Answer 1

您的目标有点难以把握，但是我会用包装器做一些简单的事情。

假设您使用的是100％滑块，则具有以下条件：

无法滑入“不在范围内”区域
需要能够计算手柄两侧的值
应在视觉上向用户指示值超出范围的地方

这是一个简单的示例：http://jsfiddle.net/Twisty/z0vepxou/

HTML

<div class="slide-wrap">
  <div class="flat-slider" id="flat-slider"></div>
</div>

首先，我们为滑块创建一个容器。

CSS

.slide-wrap {
  height: 3px;
  background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}

.flat-slider .ui-slider-handle {
  width: 15px;
  height: 15px;
  background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.flat-slider.ui-slider-horizontal {
  height: 3px;
  background: #D4B056;
  border: 0;
}

.flat-slider .ui-slider-range {
  border: 0;
  border-radius: 7;
  background: #9D09AD;
}

.flat-slider.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 3px;
}

为您的主题添加一些CSS。

JavaScript

$(function() {
  var ranges = {
    trueMin: 0,
    trueMax: 500,
    minorMin: 172,
    minorMax: 400,
    start: 250,
    values: [
      0,
      0
    ]
  };
  ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
  ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));

  $('#flat-slider').slider({
    range: "min",
    value: ranges.start,
    min: ranges.minorMin,
    max: ranges.minorMax,
    slide: function(e, ui) {
      var lowValue = ui.value;
      var highValue = ranges.trueMax - ui.value;
      ranges.values = [lowValue, highValue];
    },
    stop: function(e, ui) {
      console.log(ranges.values);
    }
  }).css({
    "margin-left": ranges.left + "%",
    "margin-right": ranges.right + "%"
  });
});

由于您正在使用jQuery UI 1.8.9，因此有些元素我们无法轻松访问。我想强制将数组输入values中，如果在jQuery UI 1.11+中完成，则效果会更好。现在，我创建了一个对象来存储所有各种详细信息。如果有许多需求（而不仅仅是一个滑块），可以在$.widget()中重新创建它们。

由于用户不能选择超出范围的值，所以为什么不仅仅使幻灯片不再是幻灯片的一部分。我创建了视觉背景，并使用边距来帮助创建边框。因此，现在用户只能滑动允许的值，而实际上可以看到整个滑块。

Slider可按100％的百分比工作，因此我们需要一些数学运算才能计算出适当的边距。将“滑块的最小值和最大值”设置为仅允许的范围，然后我们可以让它为我们完成所有其他工作。

我认为这应该对您有帮助。让我知道。

自定义具有4个不同范围的jQuery UI滑块

1 个答案: