时间戳

首页 > 解决方案 > 自定义具有 4 个不同范围的 jQuery UI 滑块

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

问题描述

我想根据我的需要自定义我的 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]

标签： jquerycssjquery-uislider

解决方案

你的目标有点难以理解，但我会用包装器做一些简单的事情。

假设您使用 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()如果需要，这些可以重新创建许多，而不是一个滑块。

既然用户不应该能够选择范围之外的值，为什么不只是让比不再是幻灯片的一部分。我创建了一个视觉背景并使用边距来帮助创建边框。所以现在用户只能滑动允许的值，但可以看到整个滑块（本质上）。

滑块适用于 100% 的百分比，因此我们需要一些数学来计算正确的边距。将滑块的最小值和最大值设置为允许的范围，然后我们可以让它为我们完成所有其他工作。

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

推荐阅读