Показать сообщение отдельно
  #16 (permalink)  
Старый 06.01.2021, 00:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

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>
Ответить с цитированием