Настройте слайдер jQuery UI с 4 различными диапазонами - PullRequest
Новая
       31

Настройте слайдер jQuery UI с 4 различными диапазонами

0 голосов
/ 20 ноября 2018

Я бы хотел настроить слайдер 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>

Я ожидаю что-то вроде этого: enter image description here

На данный момент язастрял, чтобы скрыть второй обработчик и определить диапазон 1 и 2. Если я скрываю второй обработчик, я не могу переместить первый.Я не знаю, возможно ли определить мой диапазон.

Результат отличается от jsfiddle

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

РЕДАКТИРОВАТЬ:

Я составил это: http://jsfiddle.net/myLpqrxw/11/

Мне нужно изменить цвет отключенного диапазона [0, 172] и [400, 500]

1 Ответ

0 голосов
/ 20 ноября 2018

Ваша цель немного сложна для понимания, но я бы сделал кое-что простое с оберткой.

Если вы используете ползунок 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%, поэтому нам нужна небольшая математика для вычисления правильных полей.Установив Min и Max для Slider только в допустимом диапазоне, мы можем позволить ему выполнить всю остальную работу за нас.

Я думаю, что это должно вам помочь.Дайте мне знать.

...