[stas115]

<script src="/js/jquery-ui.js"></script>
	<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 100,
			max: 7000,
			values: [ 100, 7000 ],
			slide: function( event, ui ) {
				document.getElementById('price').innerHTML = ui.values[ 0 ] + ' - ' + ui.values[ 1 ];
			}, 
			change: function(event, ui) { 
				$( "#price_s" ).val(ui.values[ 0 ]);
				$( "#price_e" ).val(ui.values[ 1 ]);
			}
		});
	});
	</script>
	<div id="slider-range"></div>
	<input type="hidden" name="price_s" id="price_s" value="0">
	<input type="hidden" name="price_e" id="price_e" value="7000">
	<div id="price"></div>

это весь js код, так как используется jquery ui.
Все работает, только необходимо сделать чтобы сами ползунки не заезжали друг на друга, визуально выходит что можно друг на друга сдвинть и будто один всего ползунок