Как переключать элементы списка при смещении ползунка, с достижением конкретного значения?

Question

$("#gorod").change(function(e) {
  if (this.options[0].selected) {
    $("#polzunok-1").slider({
      value: 3
    });
  }
});

$("#gorod").change(function(e) {
  if (this.options[1].selected) {
    $("#polzunok-1").slider({
      value: 5
    });
  }
});

$("#gorod").change(function(e) {
  if (this.options[2].selected) {
    $("#polzunok-1").slider({
      value: 10
    });
  }
});

$("#gorod").change(function(e) {
  if (this.options[3].selected) {
    $("#polzunok-1").slider({
      value: 20
    });
  }
});

$("#gorod").change(function(e) {
  if (this.options[4].selected) {
    $("#polzunok-1").slider({
      value: 30
    });
  }
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select name="gorod" id="gorod" data-options="500" data-option="0" data-name="Тарифы">
  <option value="95" name="Промо" id="promo"> Промо </option>
  <option value="194" name="Стартовый" id="starter">Стартовый</option>
  <option value="387" name="Бизнес" id="biznes">Бизнес</option>
  <option value="618" name="Корпоративный" id="coop">Корпоративный</option>
  <option value="3300" name="Колл-центр" id="callcentr">Колл-центр</option>
</select>

Нужно, чтобы переключался элемент из списка при достижении ползунка значения этого элемента из списка. Например: Если 1 "Промо" начинается со значения 3, то на 5 уже должен выбраться 2 элемент списка и тд.

$("#gorod").change(function(e) {
  if (this.options[0].selected) {
    $("#polzunok-1").slider({
      value: 3
    });
  }
});

Answer 1

$("#polzunok-1").slider({
  value: 0,
  min: 3,
  max: 50,
  step: 1,
  slide: function(event, ui) {
    if (ui.value >= 30)
      $("#gorod")[0].selectedIndex = 4;
    else if (ui.value >= 20)
      $("#gorod")[0].selectedIndex = 3;
    else if (ui.value >= 10)
      $("#gorod")[0].selectedIndex = 2;
    else if (ui.value >= 5)
      $("#gorod")[0].selectedIndex = 1;
    else if (ui.value >= 3)
      $("#gorod")[0].selectedIndex = 0;
  }
});

БЛОГ НА HUSL

Как переключать элементы списка при смещении ползунка, с достижением конкретного значения?

Ответы (1 шт):