Javascript-форум - Ползунок (Range) jquery UI

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)

Ползунок (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>

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

только костыли на ум приходят)

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

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

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,
(50000 - 1000 ) / 500 = 98
(200000 -50000)/ 5000 = 30
диапазоны равны ищем ближайшее число делимое на 98 и 30 это и есть половина диапазона - всё это основное (проще сделать, чем коментрировать)

Цитата:

Сообщение от рони (Сообщение 365199)

Огромнейшее спасибо!
И последний вопрос)))
Для чего было использовано событие "change"?

Цитата:

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

Для чего было использовано событие "change"?

для строки 71 в основном
только наличие этого параметра позволяет програмно устанавливать значение слайдера.