Как создать слайдер jQuery UI, который будет иметь три диапазона и один ползунок?

Question

[Vadik7777]

Всем привет!

Как создать слайдер jQuery UI, который будет иметь три диапазона и один ползунок?

Диапазоны имеют следующие данные:
Диапазон 1: от 100 до 2999 с шагом в 100
Диапазон 2: от 3000 до 9999 с шагом в 500
Диапазон 3: от 10000 до 100000 с шагом в 1000
При этом каждый диапазон должен занимать одну треть всей полосы слайдера по которому проходит ползунок.

Делаю так:

$(function() {
  var slider = $('#slider');
  var min = 100;
  var max = 100000;
  var range1Max = 3000;
  var range2Max = 10000;

  slider.slider({
    range: false,
    animate: 'slow',
    value: min,
    min: min,
    max: max,
    step: 1,
    slide: function(event, ui) {
      var value = ui.value;
      var rangeWidth = max - min;
      var stepSize;

      if (value <= range1Max) {
        stepSize = 100;
      } else if (value <= range2Max) {
        stepSize = 500;
      } else {
        stepSize = 1000;
      }

      var numSteps = rangeWidth / stepSize;
      var stepWidth = 100 / numSteps;
      var closestStep = Math.round(value / stepSize) * stepSize;

      slider.find('.ui-slider-range').width((closestStep - min) / rangeWidth * 100 + '%');

      slider.find('.ui-slider-handle').text(closestStep.toLocaleString());

      ui.value = closestStep;
    }
  });
});

Все работает, кроме ширины диапазонов при перемещении ползунка.

Народ, кто может подсказать, каким образом такое осуществить, или может кто уже делал?

Answer 1

[Vadik7777]

Вообщем как всегда сам, сам задал, сам ответил!

С помощью noUiSlider эта задача была выполнена, таким образом:

var nonLinearStepSlider = document.getElementById('slider');

noUiSlider.create(nonLinearStepSlider, {
    start: [100],
	step: 100,
    range: {
        'min': [100],
        '33%': [3000, 500],
        '66%': [10000, 1000],
        'max': [100000]
    }
});

Вот так вот!