Показать сообщение отдельно
  #3 (permalink)  
Старый 30.01.2020, 21:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Diiim, не используйте этот ui-слайдер, он не везде работает (например, в браузере Chrome на Android) Также не понятно, почему вы запрещаете ввод через текстовое поле (это была бы возможность ввести, если не работает слайдер от jQuery, но на jQuery это решается очень сложно с учётом того, что нужна двусторонняя связь)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		input[type="range"] {
			display: block;
			width: 100%;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
		$(function() {
			$("#slid-er-1").on("input", function(event) {
				var price = Math.max(0, 47770 - this.value * 1500);
				price = String(price).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ")
				$("#amount_1_1").text(price + " ₽")
				$(".num-ber").val(this.value);
			});
		});
  </script>
</head>
<body>
	<span>Количество участников: <input type="text" class="num-ber" disabled id="amount_1" value="0"></span>
	<!-- ui слайдер -->
	<input type="range" min="0" max="100" step="1" value="0" class="slid-er-calc" id="slid-er-1"></input>
	<span class="in-cell" id="amount_1_1">47 770 ₽</span>
</body>
</html>
Я вам рекомендую вместо jQuery начать переходить на React, тогда такие проблемы будут легко решаться.

ЕЩЁ На самом деле слово по слогам делится так — slid-er

Последний раз редактировалось Malleys, 30.01.2020 в 21:14.
Ответить с цитированием