0

Дан массив дней питания человека: [2, 4, 5, 6, 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]

Ввод цифры не из массива в инпут поле не двигает ползунок jQiery UI плагина.

Подскажите, как можно реализовать например, что бы при вводе цифры 1, ползунок двигался до цифры 2?

document.addEventListener('DOMContentLoaded', function() {
  const prices = [2, 4, 5, 6, 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30];
  const sliderRunner = $('.js-diet__slider-runner')
  const diet__slider = $('.js-diet__slider')
  const sliderInput = $('.js-diet__slider-input')

  // ползунок бюджета
  diet__slider.each(function() {
    $(this).slider({
      animate: true,
      range: 'min',
      value: 0,
      min: 0,
      max: prices.length - 1,
      step: 1,
      slide: function(event, ui) {
        sliderRunner.attr('data-days', numToStr(prices[ui.value], ['день', ' дня', ' дней']));
        sliderRunner.text(prices[ui.value]);
        sliderInput.val(prices[ui.value]);
      }
    });
  });

  /**
   * @desc планируется создание функции для ввода цифры в инпут поле, что бы двигался ползунок
   * Для того надо принять из инпута цифру, перебрать массив {prices} находим совпадение, узнаем индекс этого совпадения
   * и двигаем ползунок слайдера
   */
  sliderInput.on('keyup', function() {
    let sum = +$(this).val();
    const getIndex = prices.indexOf(sum)

    if (getIndex !== -1) {
      diet__slider.slider('value', getIndex);
      sliderRunner.text(sum)
    }
  });


  /**
   * @type function
   * @desc Функция склоняет слова
   * @param {Number} num - принимает число
   * @param {Array} arrText - возвращаем массив с текстом
   */
  const numToStr = function(num, arrText) {
    if (num % 10 === 1 && num % 100 !== 11) {
      return arrText[0];
    } else if (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20)) {
      return arrText[1];
    }
    return arrText[2];
  }
});
.diet__slider-panel {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1;
  color: #3b4561
}

.diet__slider-enter {
  display: flex;
  align-items: center
}

.diet__slider-enter::before {
  content: attr(data-enter)
}

.diet__slider-enter::after {
  content: attr(data-days)
}

.diet__slider-input {
  width: 40px;
  height: 25px;
  margin: 0 12px;
  padding: 0 10px;
  border: 1px solid #f4f5f8;
  display: block;
  text-align: center;
  line-height: 1;
  color: #3b4561;
  background-color: #f4f5f8
}

.diet__slider-range {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #94a2ab;
  position: relative
}

.diet__slider-range::before {
  content: attr(data-from)
}

.diet__slider-range::after {
  content: attr(data-to)
}

.diet__slider-runner {
  text-align: center;
  position: absolute;
  z-index: 1;
  color: #fff;
  background-color: #3eaaa2;
  margin-top: 25px;
  top: 0;
  left: 0;
}

.diet__slider-runner::after {
  padding-left: 4px;
  content: attr(data-days)
}

.diet__slider-total {
  margin-bottom: 0;
  padding: 19px 23px;
  background-color: #f4f5f8;
  border-radius: 16px;
  font-size: 14px;
  line-height: 17px;
  color: #3b4561;
  list-style: none;
  display: flex;
  justify-content: space-between
}

.diet__slider-total--box:last-child {
  text-align: right
}

.diet__slider-total--info::after {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  display: inline-flex;
  background: url(../images/icons/info.svg) no-repeat center;
  content: ""
}

.diet__slider-cost {
  margin-top: 11px;
  font-weight: 600
}

.diet__slider-input::-webkit-inner-spin-button,
.diet__slider-input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

.diet__slider-input,
.diet__slider-input:focus,
.diet__slider-input:hover {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield
}

.diet__slider-side {
  margin-top: 30px
}
<link href="https://code.jquery.com/ui/1.13.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.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>

<div class="diet__slider-panel">
  <div class="diet__slider-enter" data-enter="Введите" data-days="дней">
    <input type="number" maxlength="30" value="2" name="scale-budget" class="diet__slider-input js-diet__slider-input" id="diet__slider-input">
  </div>
</div>

<div class="diet__slider-range" data-from="2" data-to="30"></div>

<div class="js-diet__slider">
  <div class="ui-slider-handle">
    <span class="diet__slider-runner js-diet__slider-runner" data-days="дня">2</span>
  </div>
</div>

2
  • 1
    Зачем событие keyup? Это же не удобно, есть 'input'. Насчет слайдера, узнайте минимальное значение и проверяйте текущее значение, если минимальное больше - устанавливайте минимальное. Commented 16 мая 2022 в 16:49
  • Вы правы, сейчас посидел и решил задачу!
    – Aleksandr
    Commented 16 мая 2022 в 19:57

1 ответ 1

0

Нужно было всего лишь правильно условие дописать:

 else if (sum < 2) {
  diet__slider.slider('value', prices.indexOf(0));
  sliderRunner.text(2)
} else if (sum > 8 || sum < 30) {
  diet__slider.slider('value', prices.indexOf(sum - 3));
  sliderRunner.text(sum + 1)
}

document.addEventListener('DOMContentLoaded', function() {
  const prices = [2, 4, 5, 6, 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30];
  const sliderRunner = $('.js-diet__slider-runner')
  const diet__slider = $('.js-diet__slider')
  const sliderInput = $('.js-diet__slider-input')

  // ползунок бюджета
  diet__slider.each(function() {
    $(this).slider({
      animate: true,
      range: 'min',
      value: 0,
      min: 0,
      max: prices.length - 1,
      step: 1,
      slide: function(event, ui) {
        sliderRunner.attr('data-days', numToStr(prices[ui.value], ['день', ' дня', ' дней']));
        sliderRunner.text(prices[ui.value]);
        sliderInput.val(prices[ui.value]);
      }
    });
  });


  /**
   * @desc функция для ввода цифры в инпут поле, что бы двигался ползунок
   * Для того надо принять из инпута цифру, перебрать массив {prices} находим совпадение, узнаем индекс этого совпадения
   * и двигаем ползунок слайдера
   */
  sliderInput.on('input', function() {
    let sum = +$(this).val();
    const getIndex = prices.indexOf(sum);
    console.log(getIndex, sum)

    if (getIndex !== -1) {
      diet__slider.slider('value', getIndex);
      sliderRunner.text(sum)
    } else if (sum < 2) {
      diet__slider.slider('value', prices.indexOf(0));
      sliderRunner.text(2)
    } else if (sum > 8 || sum < 30) {
      diet__slider.slider('value', prices.indexOf(sum - 3));
      sliderRunner.text(sum + 1)
    }
  });


  /**
   * @type function
   * @desc Функция склоняет слова
   * @param {Number} num - принимает число
   * @param {Array} arrText - возвращаем массив с текстом
   */
  const numToStr = function(num, arrText) {
    if (num % 10 === 1 && num % 100 !== 11) {
      return arrText[0];
    } else if (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20)) {
      return arrText[1];
    }
    return arrText[2];
  }
});
.diet__slider-panel {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1;
  color: #3b4561
}

.diet__slider-enter {
  display: flex;
  align-items: center
}

.diet__slider-enter::before {
  content: attr(data-enter)
}

.diet__slider-enter::after {
  content: attr(data-days)
}

.diet__slider-input {
  width: 40px;
  height: 25px;
  margin: 0 12px;
  padding: 0 10px;
  border: 1px solid #f4f5f8;
  display: block;
  text-align: center;
  line-height: 1;
  color: #3b4561;
  background-color: #f4f5f8
}

.diet__slider-range {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #94a2ab;
  position: relative
}

.diet__slider-range::before {
  content: attr(data-from)
}

.diet__slider-range::after {
  content: attr(data-to)
}

.diet__slider-runner {
  text-align: center;
  position: absolute;
  z-index: 1;
  color: #fff;
  background-color: #3eaaa2;
  margin-top: 25px;
  top: 0;
  left: 0;
}

.diet__slider-runner::after {
  padding-left: 4px;
  content: attr(data-days)
}

.diet__slider-total {
  margin-bottom: 0;
  padding: 19px 23px;
  background-color: #f4f5f8;
  border-radius: 16px;
  font-size: 14px;
  line-height: 17px;
  color: #3b4561;
  list-style: none;
  display: flex;
  justify-content: space-between
}

.diet__slider-total--box:last-child {
  text-align: right
}

.diet__slider-total--info::after {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  display: inline-flex;
  background: url(../images/icons/info.svg) no-repeat center;
  content: ""
}

.diet__slider-cost {
  margin-top: 11px;
  font-weight: 600
}

.diet__slider-input::-webkit-inner-spin-button,
.diet__slider-input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

.diet__slider-input,
.diet__slider-input:focus,
.diet__slider-input:hover {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield
}

.diet__slider-side {
  margin-top: 30px
}
<link href="https://code.jquery.com/ui/1.13.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.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>

<div class="diet__slider-panel">
  <div class="diet__slider-enter" data-enter="Введите" data-days="дней">
    <input type="number" maxlength="30" value="2" name="scale-budget" class="diet__slider-input js-diet__slider-input" id="diet__slider-input">
  </div>
</div>

<div class="diet__slider-range" data-from="2" data-to="30"></div>

<div class="js-diet__slider">
  <div class="ui-slider-handle">
    <span class="diet__slider-runner js-diet__slider-runner" data-days="дня">2</span>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.