Набор стилей и js для jquery UI slider range

cost-slider.js

$("#cost__slider").slider({
			range: true,
			min: 0,
			max: 39987,
			values: [ 3000, 25500 ],
			slide: function( event, ui ) {
				$( "#cost-min" ).val(ui.values[ 0 ]);
				$("#cost-max").val(ui.values[ 1 ]);
			}
		});
		$( "#cost-min" ).val($("#cost__slider").slider( "values", 0 ));
		$( "#cost-max" ).val($("#cost__slider").slider( "values", 1 ));
		$("input#cost-min").change(function(){
			var value1=$("input#cost-min").val(),
			 	value2=$("input#cost-max").val();
			// проверка на отрицательную цену
			if (value1 < 0) { value1 = 0; $("input#cost-min").val(0)}

			if(parseInt(value1) > parseInt(value2)){
				value1 = value2;
				$("input#cost-min").val(value1);
			}
			$("#cost__slider").slider("values",0,value1);
		});
		$("input#cost-max").change(function(){
			var value1=$("input#cost-min").val(),
				value2=$("input#cost-max").val(),
				maxvalue = $("#cost__slider").slider( "option", "max" );

			//проверка на превышение максимального значения
			if (value2 > maxvalue) { value2 = maxvalue; $("input#cost-max").val(maxvalue)}

			if(parseInt(value1) > parseInt(value2)){
				value2 = value1;
				$("input#cost-max").val(value2);
			}
			$("#cost__slider").slider("values",1,value2);
		});

jquery.ui.slider.css

/* Ширина слайдера */
#cost__slider {
width: 200px;
}
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 13px; /* Задаем нужную ширину */
height: 13px; /* и высоту */
background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
cursor: pointer
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
overflow: hidden;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
height: 3px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle {
top: -5px;
margin-left: -6px;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content {
border: 1px solid #D4D4D4;
background: #fff;
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
border: 1px solid #D4D4D4;
background: #f00;
}
/* скругление для полосы слайдера */
.ui-corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}