Делаю 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>
Сделал по аналогии с примерами, но получилось вот что. Подскажите что необходимо изменить чтобы данные слева принадлежали только левому ползунку а данные справа правому соответственно.