<div class="row">
	<div class="col-md-12">
		<input type="text" id="slider{filter_id}" class="span2" value="" data-slider-min="{min}" data-slider-max="{max}" data-slider-step="1" data-slider-value="[{min},{max}]" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
	</div>
	<br>
	<div class="col-md-6">
		<input type="text" name="f[{filter_id}][min]" value="{min}" class="form-control">	
	</div>
	<div class="col-md-6">
		<input type="text" name="f[{filter_id}][max]" value="{max}" class="form-control">
	</div>
</div>
<script>
	$(document).ready(function(){
		$("#slider{filter_id}").slider().on("slide", function(ev){
            $(this).closest(".row").find("[name*='min']").val(ev.value[0]);
            $(this).closest(".row").find("[name*='max']").val(ev.value[1]);
        })
	})
</script>