jQuery UI - Slider

HTML

<div class="filter__block filter__block--slider">
                                        <div class="filter__head">цена изделия</div>
                                        <div class="filter__slider">
                                            <div class="range__zero">0</div>
                                            <div id="filter__range"></div>
                                        </div>
                                        <div class="filter__cost table">
                                            <div class="table-cell"> <span>от</span></div>
                                            <div class="table-cell">
                                                <input id="priceMin" type="text" value="5000" class="form-control">
                                            </div>
                                            <div class="table-cell"><span>до</span></div>
                                            <div class="table-cell">
                                                <input id="priceMax" type="text" value="15000" class="form-control">
                                            </div>
                                            <div class="table-cell"><span>руб</span></div>
                                        </div>
                                    </div>

CSS

.filter {
  font-family: "Exo 2 Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #535353;
  max-width: 262px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 40; }
  .filter__block {
    margin-bottom: 25px; }
    .filter__block--slider {
      padding-left: 13px;
      padding-right: 13px; }
      .filter__block--slider .filter__head {
        margin-left: -13px;
        margin-right: -13px; }
    .filter__block--category {
      margin-bottom: 10px; }
  .filter__head {
    background: #f9fafa;
    color: #535353;
    padding: 0 13px;
    line-height: 40px;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    font-size: 0.875rem; }
    .filter__head--category {
      background: none;
      padding-top: 0;
      padding-bottom: 0;
      color: #ae9f3d;
      height: auto;
      line-height: inherit;
      margin-bottom: 5px; }
  .filter__row {
    font-weight: 600;
    display: block;
    cursor: pointer;
    padding: 5px 55px 5px 35px;
    position: relative;
    margin: 0;
    line-height: 1.3; }
    .filter__row input[type=checkbox] {
      display: none; }
      .filter__row input[type=checkbox]:checked ~ .checkbox::after {
        color: #c6bd83;
        content: "\f374"; }
      .filter__row input[type=checkbox]:checked ~ .label {
        color: #ae9f3d; }
      .filter__row input[type=checkbox]:checked ~ .sup {
        color: #ae9f3d; }
      .filter__row input[type=checkbox]:disabled ~ .checkbox::after {
        content: "\f372"; }
      .filter__row input[type=checkbox]:disabled ~ .label {
        color: #bcbcbc;
        text-decoration: line-through; }
      .filter__row input[type=checkbox]:disabled ~ .sup {
        color: #bcbcbc; }
    .filter__row .checkbox {
      height: 12px;
      width: 12px;
      position: absolute;
      display: block;
      margin: 0;
      left: 13px;
      top: 7px; }
      .filter__row...

JavaScript

$(function () {
   $("#filter__range").slider({
  	min: 0,
  	max: 20000,
  	values: [5000,15000],
  	range: true,
  	stop: function(event, ui) {
      $("input#priceMin").val($("#filter__range").slider("values",0));
      $("input#priceMax").val($("#filter__range").slider("values",1));

      $('.price-range-min.value').html($("#filter__range").slider("values",0));
      $('.price-range-max.value').html($("#filter__range").slider("values",1));
    },
    slide: function(event, ui){
      $("input#priceMin").val($("#filter__range").slider("values",0));
      $("input#priceMax").val($("#filter__range").slider("values",1));

      $('.price-range-min.value').html($("#filter__range").slider("values",0));
      $('.price-range-max.value').html($("#filter__range").slider("values",1));
    }
  });

  $("input#priceMin").on('change', function(){
  	var value1=$("input#priceMin").val();
  	var value2=$("input#priceMax").val();
    if(parseInt(value1) > parseInt(value2)){
  		value1 = value2;
  		$("input#priceMin").val(value1);
      $('.price-range-min.value').html(value1);
  	}
  	$("#filter__range").slider("values", 0, value1);
    $('.price-range-min.value').html(value1);
  });

  $("input#priceMax").on('change', function(){
  	var value1=$("input#priceMin").val();
  	var value2=$("input#priceMax").val();
  	if (value2 > 20000) { value2 = 20000; $("input#priceMax").val(35000)}
  	if(parseInt(value1) > parseInt(value2)){
  		value2 = value1;
  		$("input#priceMax").val(value2);
      $('.price-range-max.value').html(value2);
  	}
  	$("#filter__range").slider("values",1,value2);
    $('.price-range-max.value').html(value2);
  });

  $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">' + $('#filter__range').slider('values', 0 ) + '</span>');
  $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">' + $('#filter__range').slider('values', 1 ) + '</span>');
});