Нелинейный JQuery пользовательский интерфейс

Question

Мне нужно решение для нелинейного слайдера. Я действительно не нахожу подобные вопросы, потому что я не хочу кормить свой слайдер массивом. В моем слайдере есть 4 важных значения: 1, 150, 250, 1000, 5000.

Мое временное решение - почти то, что мне нужно, но если я попытаюсь запустить поле ввода для значений слайдера, оно получит больше и более сложный.

Я также пытался установить диапазон ползунка от 1 до 5000. Конечно, поле ввода работает хорошо, но сам ползунок нет.

Есть ли еще одна возможность получить эту вещь работает?

Вот полный пример. Это немного модифицировано для лучшего понимания:

$(document).ready(function() {
  $("#userCount").keyup(function() {
    let regex = /^[0-9]+$/;
    if (regex.test(this.value) !== true)
      this.value = this.value.replace(/[^0-9]+/, '');
    var2s = $("#userCount").val();
    setSlider(var2s);
  });
});

function setSlider(userValue) {
  let realUsers = 0;
  if (userValue >= 0 && userValue < 156) {
    realUsers = userValue / (150 / 25);
  } else if (userValue >= 156 && userValue < 680) {
    realUsers = userValue / (250 / 50);
  } else if (userValue > 680 && userValue < 3800) {
    realUsers = userValue / (1000 / 75);
  } else if (userValue >= 3800) {
    realUsers = userValue / (5000 / 100);
  }

  $("#slider").slider("value", Math.round(realUsers));
  $("#price").html(realUsers);
  //$("#price").html(userValue);
}

$(function() {
  let multi = 1;
  let userCount = 1;
  $("#slider").slider({
    value: 1,
    min: 1,
    max: 100,
    step: 1,
    slide: function(event, ui) {
      if (ui.value >= 0 && ui.value < 27) {
        multi = 150 / 25;
        userCount = ui.value * multi;
      } else if (ui.value >= 27 && ui.value < 51) {
        multi = 250 / 50;
        userCount = ui.value * multi;
      } else if (ui.value >= 51 && ui.value < 76) {
        multi = (1000 / 75);
        userCount = ui.value * multi;
      } else if (ui.value >= 75) {
        multi = (5000 / 100);
        userCount = ui.value * multi;
      }
      $("#userCount").val(Math.round(userCount));
      $("#price").html(ui.value);
    }
  });
});

.Container {
  display: flex;
  flex-direction: column;
  width: 800px;
  align-items: center;
}

.innerFlex {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}

.usersField {
  width: 30%;
  height: 100px;
  padding: 10px;
}

.sliderField {
  width: 80%;
  padding: 20px;
}

.priceField {
  width: 30%;
  padding: 10px;
}

.breakDownField {
  width: 80%;
  padding: 10px;
}

.sliderLabel {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 0px 0px;
}

#slider {
  width: 100%;
}

<title>Preisrechner</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <div class="innerFlex">
    <div class="usersField">
      <label for="userCount">Value</label><br>
      <input type="text" id="userCount" value="1" min="1" max="5000">
    </div>
    <div class="sliderField">
      <div class="sliderLabel"><span>1</span><span>150</span><span>250</span><span>1000</span><span>5000</span>
      </div>
      <div id="slider"></div>
    </div>
  </div>
  <div class="innerFlex">
    <div class="priceField">
      <span id="price">0</span>
    </div>
    <div class="breakDownField">

    </div>
  </div>
</div>