Фильтрация по цене в ui?

Question

[Александр Наумов]

Есть фильтрация по ценам на сайте. Сделана с помощью библиотеки UI slider:

HTML

<div class=" sidebar__filter_item_content-last sidebar-price-f">
		<div class="filter_label_item">
			<label>
				<input class="checkbox"  data-price-from="3000"  type="checkbox" name="checkbox" >
				<span class="checkbox-custom"></span>
				<span class="label">до 3 000
				</span>
			</label>
			<a href="#" class="show-product">
				Покаaзать
			</a>

		</div>
		<div class="filter_label_item">
			<label>
				<input class="checkbox"  data-price-from="3000"    type="checkbox" data-price-to="7000"  name="checkbox" >
				<span class="checkbox-custom"></span>
				<span class="label">от 3 000 до 7 000
				</span>
			</label>
			<a href="#" class="show-product">
				Покаaзать
			</a>
		</div>

		<div class="filter_label_item">
			<label>
				<input class="checkbox"  data-price-from="7000"  data-price-to="15000" type="checkbox" name="checkbox" >
				<span class="checkbox-custom"></span>
				<span class="label">от 7 000 до 15 000
				</span>
			</label>
			<a href="#" class="show-product">
				Покаaзать
			</a>
		</div>
		<div class="filter_label_item">
			<label>
				<input class="checkbox"  type="checkbox" name="checkbox" >
				<span class="checkbox-custom"></span>
				<span class="label">от 15 000 до 50 000
				</span>
			</label>
			<a href="#" class="show-product">
				Покаaзать
			</a>

		</div>
		<div class="filter_label_item">
			<label>
				<input class="checkbox"  type="checkbox" name="checkbox" >
				<span class="checkbox-custom"></span>
				<span class="label">от 50 000
				</span>
			</label>
			<a href="#" class="show-product">
				Покаaзать
			</a>
		</div>
		<div class="filter__item-row">
			<div class="slider_input_wr">
				<p>От</p>
				<input type="text" data-pricem=""  class="slider_input minCost"  value="100">
				<p>До</p>
				<input type="text" class="slider_input maxCost"  value="1159620">
				<p>руб.</p>
			</div>
			<div class="slider">
			</div>
			<div class="slider-value-all">
				<div class="start-val">
					100
				</div>
				<div class="finish-val">
					1 159 620
				</div>
			</div>
		</div>

JS

$(document).ready(function(){
  jQuery(".slider").slider({
    min: 100,
    max: 1159620,
    values: [100,1159620],
    range: true,
    stop: function(event, ui) {
      jQuery("input.minCost").val(jQuery(".slider").slider("values",0));
      jQuery("input.maxCost").val(jQuery(".slider").slider("values",1));

    },
    slide: function(event, ui){
      jQuery("input.minCost").val(jQuery(".slider").slider("values",0));
      jQuery("input.maxCost").val(jQuery(".slider").slider("values",1));
    }
  });
  jQuery("input.minCost").change(function(){

    var value1=jQuery("input.minCost").val();
    var value2=jQuery("input.maxCost").val();

    if(parseInt(value1) > parseInt(value2)){
      value1 = value2;
      jQuery("input.minCost").val(value1);
    }
    jQuery(".slider").slider("values",0,value1);  
  });
  jQuery("input.maxCost").change(function(){
    var value1=jQuery("input.minCost").val();
    var value2=jQuery("input.maxCost").val();
    if (value2 > 1159620) { value2 = 1159620; jQuery("input.maxCost").val(1159620)}
    if(parseInt(value1) > parseInt(value2)){
      value2 = value1;
      jQuery("input.maxCost").val(value2);
    }
    jQuery(".slider").slider("values",1,value2);
  });
});

Нужно, чтобы при выборе нужного checkbox значения подставлялись в input и отображались на линии с диапазоном.
Сделал так, значение в input ставятся, а линия с диапазонами все так же на месте стоит:

$(document).ready(function(){
$('.sidebar-price-f input[type="checkbox"]').on('change', function() {
  var thisfrom = $(this).attr('data-price-from');
  var thisto = $(this).attr('data-price-to');
  if ( $(this).is(':checked') ) {
    $('.minCost').val(thisfrom);
    $('.maxCost').val(thisto);
  } 
});
});

Answer 1

[0xD34F]

Неужели так трудно документацию было открыть? Так же всё написано.

$('.slider').slider('values', [ thisfrom, thisto ]);

UPD. Если одновременно выбраны "от 3 до 7" и "от 15 до 50", например - отобразить подобное не выйдет, интервал не должен иметь разрывов. Очевидно, вместо чекбоксов должны быть радиокнопки.

UPD. https://jsfiddle.net/mzqcLn8a/