Не выводятся данные range слайдера из jquery-ui

273

10 июня 2017, 13:10

Делаю range-slider при помощи jquery-ui и столкнулся с проблемой вывода данных.

$(function(){ 
	var d = $("#left > .left-count"); 
	var r = $("#right > .right-count"); 
 
	$(".js_subscribed").slider({ 
		range: true, 
		min: 1000, 
		max: 8000000, 
		step: 1000, 
		values: [50000, 7000000], 
		create: function(event, ui) { 
			d.text($(this).slider("value") + "k"); 
			r.text($(this).slider("value") + "m"); 
		}, 
		slide: function(event, ui){ 
			d.text(ui.value + "k"); 
			r.text(ui.value + "m"); 
		} 
	}); 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div> 
		<div id="sub">Values:</div> 
		<div class="js_subscribed"> 
      <div id="left" class="ui-slider-handle"> 
        <span class="left-count"></span> 
      </div> 
      <div id="right" class="ui-slider-handle"> 
        <span class="right-count"></span> 
      </div> 
    </div> 
</div>

Сделал по аналогии с примерами, но получилось вот что. Подскажите что необходимо изменить чтобы данные слева принадлежали только левому ползунку а данные справа правому соответственно.

Answer 1

Проблема в том, что установка свойства value через вызов метода jQuery $("#sub").val() для элемента div не имеет смысла. Поменяйте на $("#sub").html(...). А лучше:

<div id="sub">Values: <span></span></div>

$("#sub > span").html(...);

как можно вывести данные под ползунки

Выводите их прямо на ползунки:

https://jqueryui.com/slider/#custom-handle

Update

slide: function(event, ui){
  $(ui.handle).text(ui.value + $(ui.handle).data("suffix"));
}
<div id="left" class="ui-slider-handle" data-suffix="k">
  <span class="left-count"></span>
</div>
<div id="right" class="ui-slider-handle" data-suffix="m">
  <span class="right-count"></span>
</div>