Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Ползунок (Range) jquery UI (https://javascript.ru/forum/dom-window/54910-polzunok-range-jquery-ui.html)

hfts_rider 06.04.2015 11:12
Ползунок (Range) jquery UI
 
Не могу никак разобраться с одной задачей..

Есть ползунок:
---
min: "1 000"
max: "200 000"

step "500"

if value > "50 000"
step "5 000"
---

Проблема в том что "50 000" должно находиться по средине шкалы.
И еще не могу понять почему когда я условиями изменяю шаг, после "50 000" у меня идет "56 000" а после уже добавляется по "5 000"...

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
  </head>
  <body>

    <div class="slider-range range-uah"></div> 
    <div class="result-block"></div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script>
$(function() {
	$( ".range-uah" ).slider({
		range: "min",
		value: 20000,
		step: 500,
		min: 1000,
		max: 200000,
		slide: function( event, ui ) {
          var res = ui.value;
				if (res >= 50000) {
					$( ".range-uah" ).slider({step: 5000});
					$( ".result-block" ).html(res);
				} else {
					$( ".range-uah" ).slider({step: 500});
					$( ".result-block" ).html(res);
				}
		}
	});
	$( ".result-block" ).html($( ".range-uah" ).slider( "value" ));
});
</script>

  </body>
</html>


Дайте совет, что нужно сделать и как логически это продумать...

Viral 06.04.2015 12:19
только костыли на ум приходят)

Viral 06.04.2015 12:31
Грубо говоря.., естественно, надо допилить..

hfts_rider 06.04.2015 13:04
Эх.. Спасибо конечно, но все равно не понимаю как эти 150 000 поместить в половину полоски...) Голову ломаю над этим)))

рони 06.04.2015 13:51
Slider UI на два диапазона
 
hfts_rider,
Вариант на 98% :) :write: 
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
     <style type="text/css">
       .range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)

}
  .ui-widget-header	{
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
    background-image: -o-linear-gradient(left, #FF1493, #0060BF);
    background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
    background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
    background-image: linear-gradient(to right, #FF1493, #0060BF)
  }

  .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
  .ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
    :focus {
 outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
 border: 0;
 }
     </style>
 </head>
  <body>

    <div class="slider-range range-uah"></div>
    <div class="result-block"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
    var len = 98 *30;
	$( ".range-uah" ).slider({
		range: "min",
		value: 0,
		step: 30,
		min: 0,
		max: len * 2,
		slide: function( event, ui ) {
          var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).html(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).html(50000 + 5000*Math.floor((res-len)/98));
				}

		},
        	change: function( event, ui ) {
             var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).html(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).html(50000 + 5000*Math.floor((res-len)/98));
				}

		}


	});
	$( ".range-uah" ).slider("option", "value" , len);
});
</script>

  </body>
</html>

hfts_rider 06.04.2015 14:10
Рони, спасибо!
Ты просто гуру математики хДДД

hfts_rider 06.04.2015 14:14
А можешь подробней объяснить эту формулу?
Если мне допустим понадобится для других диапазонов...

рони 06.04.2015 14:29
hfts_rider,
(50000 - 1000 ) / 500 = 98
(200000 -50000)/ 5000 = 30
диапазоны равны ищем ближайшее число делимое на 98 и 30 это и есть половина диапазона - всё это основное (проще сделать, чем коментрировать)

hfts_rider 06.04.2015 14:36
Цитата:
Сообщение от рони (Сообщение 365199)
hfts_rider,
(50000 - 1000 ) / 500 = 98
(200000 -50000)/ 5000 = 30
диапазоны равны ищем ближайшее число делимое на 98 и 30 это и есть половина диапазона - всё это основное (проще сделать, чем коментрировать)
Огромнейшее спасибо!
И последний вопрос)))
Для чего было использовано событие "change"?

рони 06.04.2015 14:39
Цитата:
Сообщение от hfts_rider
Для чего было использовано событие "change"?
для строки 71 в основном
только наличие этого параметра позволяет програмно устанавливать значение слайдера.

hfts_rider 06.04.2015 17:10
Рони, подскажи еще одно)
Как сделать обратное действие?
Ввод в инпут значения что бы оно меняло этот ползунок.

рони 06.04.2015 17:41
hfts_rider,
только будет корректировка согласно step
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
     <style type="text/css">
       .range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)

}
  .ui-widget-header	{
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
    background-image: -o-linear-gradient(left, #FF1493, #0060BF);
    background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
    background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
    background-image: linear-gradient(to right, #FF1493, #0060BF)
  }

  .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
  .ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
    .range-uah:focus {
 outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
 border: 0;
 }
     </style>
 </head>
  <body>

    <div class="slider-range range-uah"></div>
    <input class="result-block">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
    var len = 98 *30;
	$( ".range-uah" ).slider({
		range: "min",
		value: 0,
		step: 30,
		min: 0,
		max: len * 2,
		slide: function( event, ui ) {
          var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
				}

		},
        	change: function( event, ui ) {
             var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
				}

		}


	});
	//$( ".range-uah" ).slider("option", "value" , 98 * 30);
    $( ".result-block" ).on('change', function() {
    var val = +this.value||0;
    val = val < 50000 ? Math.floor(30*(val - 1000)/500) : (len + Math.floor(98*(val - 50000)/5000)) ;
    $( ".range-uah" ).slider("option", "value" , val);
}).val(50000).change()
});
</script>

  </body>
</html>

hfts_rider 07.04.2015 10:35
Спасибо!!!!!!

hfts_rider 07.04.2015 11:23
Все шикарно, но есть еще одно но))
Как сделать переключение ползунка на лайв режим при вводе?
Пробовал изменить событие на "keyup", все вроде бы норм, но есть проблемка.. Когда я начинаю вводить все работает, когда хочу стереть, тоже, но если я ввел допустим "5000" и жму "arrow left", оно перекидывает сразу назад в конец поля... В чем может быть проблема?

Я обернул в условия.
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
     <style type="text/css">
       .range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)

}
  .ui-widget-header	{
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
    background-image: -o-linear-gradient(left, #FF1493, #0060BF);
    background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
    background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
    background-image: linear-gradient(to right, #FF1493, #0060BF)
  }

  .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
  .ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
    .range-uah:focus {
 outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
 border: 0;
 }
     </style>
 </head>
  <body>

    <div class="slider-range range-uah"></div>
    <input class="result-block">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
    var len = 98 *30;
	$( ".range-uah" ).slider({
		range: "min",
		value: 0,
		step: 30,
		min: 0,
		max: len * 2,
		slide: function( event, ui ) {
          var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
				}

		},
        	change: function( event, ui ) {
             var res = ui.value;
				if (res < len) {
                    $( ".range-uah" ).slider({step: 30});
					$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
				} else {
                    $( ".range-uah" ).slider({step: 98});
					$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
				}

		}


	});
		$( ".range-uah" ).slider("option", "value" , 98 * 30);
		$( ".result-block" ).on('keyup', function() {
			var val = +this.value||0;

			if (val >= 1000 && val <= 200000) {
				val = val < 50000 ? Math.floor(30*(val - 1000)/500) : (len + Math.floor(98*(val - 50000)/5000)) ;
				$( ".range-uah" ).slider("option", "value" , val);
			}

		});
});
</script>

  </body>
</html>

hfts_rider 07.04.2015 11:34
Я наверное понял.. Это событие "keyup" срабатывает и выводит значение..

hfts_rider 07.04.2015 12:07
Как же его можно переделать?... Я так понял что сейчас когда я ввожу значение оно меняет его на ползунке и при этом же вбивает повторно значение в поле инпут, по этому когда я жму в поле на стрелку после срабатывания события "keyup" оно повторно пересчитывает и выдает значение в поле..
Оно друг с другом связанно так что непонятно как его переделать.. Друг другу действия мешают..

рони 07.04.2015 14:24
hfts_rider,
в живую то как ? посетитель уже закончил или ещё будет вносить изменения -- может только таймер - в начале функции его обнулять в конце функции ставить второй вариант - кнопка ок


Часовой пояс GMT +3, время: 19:21.