Форум

Diiim · #1 (**permalink**) 30.01.2020, 17:37

Доброго времени, уважаемые форумчане!

Подскажите как убрать в калькуляторе убрать отрицательные числа?
Есть простенький скрипт ui слайдера, считает отлично, но вот когда доходит до снижения вычисления, то начинаются отрицательные числа.

Есть такой html

<span>Количество участников: <input type="text" class="num-bers" disabled="" id="amount_1" value="0"></span>

<!-- ui слайдер -->
<div class="sli-der-calc" id="sli-der-1"></div>

<span class="in-cell" id="amount_1_1">5770 ₽</span>

$(function() {
   $("#sli-der-1").slider({
      value: 0,
      min: 0,
      max: 100,
      step: 1,
      slide: function(event, ui) {
         $("#amount_1").val(ui.value);
         var temp = Number($('#amount_1').val());
         var noLL = $("#amount_1_1").text("0 р");
         var nnn = $("#amount_1_1").text(47770 - temp * 1500 + " ₽"); // Вычисления кладу в переменную
         if (nnn > 0) { // потом проверяю больше ли 0
            $("#amount_1_1").text(String($("#amount_1_1").text().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 '))); // если да вывожу
         } else {
            return noLL // если нет то "0 руб."
         }
      }
   });
});

Можете подсказать что я делаю не так? Или может я не в ту сторону "смотрю"?

Здесь можно наглядно посмотреть qpage.site/prj_pin/

Скрин - joxi.ru/zAN90B9S6Z3JD2

рони · #2 (**permalink**) 30.01.2020, 18:05

Diiim,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
   $("#sli-der-1").slider({
      value: 0,
      min: 0,
      max: 100,
      step: 1,
      slide: function(event, ui) {
         var nnn = 47770 - ui.value * 1500;
         if (nnn > 0) { // потом проверяю больше ли 0
            nnn = (nnn + "").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ') // если да вывожу
         } else {
           nnn = 0
         }
         $("#amount_1_1").text(nnn + " ₽")
      }})
});


  </script>
</head>
<body>
<span>Количество участников: <input type="text" class="num-bers" disabled="" id="amount_1" value="0"></span>

<!-- ui слайдер -->
<div class="sli-der-calc" id="sli-der-1"></div>

<span class="in-cell" id="amount_1_1">47 770 ₽</span>
</body>
</html>

Malleys · #3 (**permalink**) 30.01.2020, 21:08

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

Diiim · #4 (**permalink**) 31.01.2020, 06:32

рони, Malleys, весьма благодарен Вам за помощь! Все отлично работает.

Malleys, да Вы правы, что то в мобильном браузере гугл не двигается мой ползунок, а ваш прекрасно работает.
Сейчас буду исправлять, пусть лучше будет работает на большинстве девайсах чем через раз. И по гуглил, вроде как не много можно его кастомизировать. Буду пробовать.

Ребят, еще раз большое спасибо за решения, а самое главное что не прошли "мимо"!

Malleys · #5 (**permalink**) 31.01.2020, 12:04

Сообщение от Diiim

И по гуглил, вроде как не много можно его кастомизировать. Буду пробовать.

Cлайдер хорошо стилизируется в большинстве современных браузеров. Просто нужно знать, при помощи каких селекторов обратиться к его внутренностям. Вот пример стилизации вашего слайдера. https://codepen.io/Malleys/pen/jOEjYNN?editors=1100

Если вы не используете препроцессор SCSS, то отредактируйте стили на codepen в моём примере, а затем нажмите стрелочку вниз и выберите «View compiled CSS» это будет обычный CSS, который вы можете вставить к себе на сайт.

Форум

Справочник

Discord чат

Курсы javascript