ползунок пользовательского диапазона с цветным маркером для значения диапазона

Я сделал этот ползунок диапазона. Ползунок двигается, как я хочу. Как я могу получить значение того, где находится переключатель в этом случае?

Например, когда переключатель находится в диапазоне 1, div должен быть выбранным значением: 1 и так далее.

$("#slider").slider({
  value: 50
})
#green {
  background: green;
  width: 100%;
  /* margin-left: 100px; */
  height: 14px;
}

#blue {
  background: blue;
  width: 100%;
  /* margin-left: 100px; */
  height: 14px;
}

#pink {
  background: pink;
  width: 40%;
  /* margin-left: 100px; */
  height: 14px;
}

#yellow {
  background: yellow;
  width: 100%;
  /* margin-left: 100px; */
  height: 14px;
}

#slider {
  background: red;
  display: flex;
}
<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<div id="slider">
  <div id="green" class="ui-corner-all">1</div>
  <div id="blue" class="ui-corner-all">2</div>
  <div id="yellow" class="ui-corner-all">3</div>
  <div id="pink" class="ui-corner-all">4</div>
</div>

код jsFiddle


javascript jquery rangeslider jquery-ui slidetoggle
person pse    schedule 15.09.2020    source источник
comment
Я предлагаю прочитать документацию по слайдеру JQueryUI: jqueryui.com/slider   -  person Plastic    schedule 15.09.2020
comment
Читайте документы. Проверьте раздел События. Вы можете подключиться к тому, который вам нужен, и прочитать значение с ползунка, чтобы обновить DOM.   -  person Rory McCrossan    schedule 15.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

В документации по API вы можете найти

$( "#slider" ).on( "slidechange", function( event, ui ) {
    let index = Math.ceil($(this).slider("option", "value")/10000*340)-1;
    let selected = $("div#slider").children().eq(index).text();
});
person Koen    schedule 15.09.2020
comment
извините, пришлось отказаться от этого ответа, проблема с вашим решением в том, что оно не дает точного значения, но дает номер позиции. Например, если я добавляю в div любые случайные числа, он возвращает те же 1,2,3,4. Я добавил случайные номера в div, такие как 8, 9,7,4, когда в диапазоне 8 он возвращал 8 и так далее. - person pse; 15.09.2020
comment
@pse Скорректировал мой ответ. Надеюсь это поможет - person Koen; 15.09.2020