RuBAN,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$('.f-slider').each(function (i, b) {
var max = $(b).data('max'), min = $(b).data('min'), parent = $(b).parents('.f-value'),
min_input = $('.min-value', parent),max_input = $('.max-value', parent);
$(b).slider({
range: true,
animate: true,
min: min,
max: max,
values: [ min, max ],
slide: function( event, ui ) {
min_input.val(ui.values[0]);
max_input.val(ui.values[1]);
}
});
min_input.val( min);
max_input.val( max);
});
})
</script>
</head>
<body>
<div class="f-value">
<input type="text" class="min-value"> <input type="text" class="max-value">
<div class="f-slider-block">
<div data-min="0" data-max="30000" class="f-slider"></div>
</div>
</div>
<div class="f-value">
<input type="text" class="min-value"> <input type="text" class="max-value">
<div class="f-slider-block">
<div data-min="0" data-max="500" class="f-slider"></div>
</div>
</div>
</body>
</html>