Дан массив дней питания человека:
[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>
keyup
? Это же не удобно, есть 'input'. Насчет слайдера, узнайте минимальное значение и проверяйте текущее значение, если минимальное больше - устанавливайте минимальное.