Привязка input radio к слайдеру jQuery-UI

[tp-20]

а можно принудительно задать конкретные значения в js-скрипте? через условия if?
т.е. конкретно прописать: если значение меньше 1000, то присвоить checked первой радиокнопке.
если значение меньше 3000, отметить вторую радиокнопку.
и значение меньше 5000 - третья радиокнопка.

<input type="radio" name="plan" value="{$k}" checked="checked">
<input type="text" name="sum" id="calc_sum" class="minCost" value=""/>

var plan = $('input[name=plan]'); // input с планами, values = {$k} - это счётчик планов (0,1,2)
var input = $('input.minCost'); // текстовое поле - ввести число от 100 до 5000

if (input.val() < 1000){
    (plan.val(0)).prop('checked', true);
    
}

if (input.val() < 3000){
    (plan.val(1)).prop('checked', true);
    
}

if (input.val() < 5000){
    (plan.val(2)).prop('checked', true);
    
}

этот код не работает. что нужно исправить?

[рони]

tp-20,

var input = $('input.minCost'); // текстовое поле - ввести число от 100 до 5000
var plan = $('input[name=plan]'); // input с планами, values = {$k} - это счётчик планов (0,1,2)
plan.eq(0).prop('checked', true);
if (+input.val() > 3000){
    plan.eq(2).prop('checked', true);
}

if (+input.val() > 1000){
    plan.eq(1).prop('checked', true);

}

[tp-20]

рони,
выдаёт ошибку TypeError: this.options.values is null, ссылаясь на jquery-ui по этому адресу: https://code.jquery.com/ui/1.12.1/jquery-ui.js

jquery-ui.js (строка 14839, столбец 35)
Соответственно, скрипт не работает

[рони]

этот код не работает. что нужно исправить?

ответ был для этой части кода, ваша ошибка не имеет отношения к исправленной части.

[tp-20]

Приветствую!
Калькулятор тот же, только слегка видоизменённый)) Поэтому новую тему создавать не буду..)

Что имеем:
двигаем ползунок - меняется значение в инпуте и в блоке "доход в день и в месяц".

Что надо:
когда вручную вводим число в инпут, в блоке "доход в день и в месяц" значения не меняются, хотя ползунок перемещается. Как это сделать?

<div>
	<input type="text" class="main-tariffs-calc-value main-tariffs-calc-value-1" value="10000">		// инпут, куда вручную вводим значение
	<div class="main-tariffs-calc-slider-1"></div>		// ползунок (слайдер)
</div>
<div>
	<div>Доход за сутки:</div>
	<div><input type="text" value="100" class="daily-value-1"> USD</div>
</div>
<div>
	<div>Доход за месяц:</div>
	<div><input type="text" value="3000" class="month-value-1"> USD</div>
</div>
<div>
	<div>Итоговый доход:</div>
	<div><input type="text" value="70000" class="total-value-1"> USD</div>
</div>

var input = $('input.main-tariffs-calc-value-1');
	var slider = $('.main-tariffs-calc-slider-1').slider({
		range: 'min',
		min: 500,
		max: 50000,
		value: [10000],
		step: 500,
		animate: 500,
		slide : function(event, ui) {
			slider_value = input.val(ui.value);   // это значение ползунка
			slider_value = Number(slider_value.val());                      // явно преобразуем его в число
			//console.log(slider_value);
			
        	daily_value = Number($('.daily-value-1').val());                // инпут для значения прибыли за 1 день
        	daily_value = slider_value * 1.8/100;
        	$('.daily-value-1').val(daily_value);                           // динамически выводим новое значение (при движении ползунка)
        	
        	month_value = ($('.month-value-1').val());                      // инпут для значения прибыли за 1 месяц
        	month_value = slider_value * 1.8/100*30;
        	$('.month-value-1').val(month_value);                           // динамически выводим новое значение (при движении ползунка)
        	
        	total_value = Number($('.total-value-1').val());                // инпут для значения итоговой прибыли
        	total_value = slider_value * 1.8/100*70 + slider_value;
        	$('.total-value-1').val(total_value);                           // динамически выводим новое значение (при движении ползунка)
		}
	});
	
	input.on('change', function() {
        slider.slider('value', $(this).val());
    });

$('.main-tariffs-calc-value-1').text($('.main-tariffs-calc-slider-1').slider('value'));

[рони]

tp-20,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
$(function() {
var input = $('input.main-tariffs-calc-value-1');
	var slider = $('.main-tariffs-calc-slider-1').slider({
		range: 'min',
		min: 500,
		max: 50000,
		value: [10000],
		step: 500,
		animate: 500
	});
    $('.main-tariffs-calc-slider-1').on( "slide", function( event, ui ) {
    if(ui) slider_value = input.val(ui.value);   // это значение ползунка
			slider_value = Number(input.val());                      // явно преобразуем его в число
			//console.log(slider_value);
        	daily_value = Number($('.daily-value-1').val());                // инпут для значения прибыли за 1 день
        	daily_value = slider_value * 1.8/100;
        	$('.daily-value-1').val(daily_value);                           // динамически выводим новое значение (при движении ползунка)
        	month_value = ($('.month-value-1').val());                      // инпут для значения прибыли за 1 месяц
        	month_value = slider_value * 1.8/100*30;
        	$('.month-value-1').val(month_value);                           // динамически выводим новое значение (при движении ползунка)
        	total_value = Number($('.total-value-1').val());                // инпут для значения итоговой прибыли
        	total_value = slider_value * 1.8/100*70 + slider_value;
        	$('.total-value-1').val(total_value);                           // динамически выводим новое значение (при движении ползунка)
    } );
	input.on('change', function() {
        slider.slider('value', $(this).val());
        $('.main-tariffs-calc-slider-1').trigger('slide');
    });
$('.main-tariffs-calc-value-1').text($('.main-tariffs-calc-slider-1').slider('value'));
});
  </script>
</head>
<body>
<div>
	<input type="text" class="main-tariffs-calc-value main-tariffs-calc-value-1" value="10000">		// инпут, куда вручную вводим значение
	<div class="main-tariffs-calc-slider-1"></div>		// ползунок (слайдер)
</div>
<div>
	<div>Доход за сутки:</div>
	<div><input type="text" value="100" class="daily-value-1"> USD</div>
</div>
<div>
	<div>Доход за месяц:</div>
	<div><input type="text" value="3000" class="month-value-1"> USD</div>
</div>
<div>
	<div>Итоговый доход:</div>
	<div><input type="text" value="70000" class="total-value-1"> USD</div>
</div>
</body>
</html>

[tp-20]

Рони, спасибо, как всегда молниеносный точный ответ!

Вы вынесли slide отдельно, чтобы можно было поставить условие if?

$('.main-tariffs-calc-slider-1').on( "slide", function( event, ui ){

И вы ещё добавили trigger - за что он здесь отвечает? или что выполняет? спасибо

input.on('change', function() {
        slider.slider('value', $(this).val());
        $('.main-tariffs-calc-slider-1').trigger('slide');
    });

[рони]

Вы вынесли slide отдельно, чтобы можно было поставить условие if?

нет, чтобы можно было использовать вашу функцию и при движении ползунка и при изменении инпута, trigger('slide') запускает эту функцию, но нет обьекта движения "ui" поэтому добавлен if, когда изменяется значение в инпуте в ручную, эта строка с if не работает.

[tp-20]

Калк и код тот же.
Подскажите, как сделать изменение значений при вводе в input?
Сейчас значения меняются по нажатию на Enter или когда input теряет фокус.
А нужно - непосредственно при вводе цифр в input

Менял change на onkeypress и на oninput - без изменений

input.on('change', function() {
        slider.slider('value', $(this).val());
        $('.main-tariffs-calc-slider-1').trigger('slide');
});

Скриншот для наглядности:

[рони]

Менял change на onkeypress и на oninput - без изменений

input