Index: branches/1.0.x/elements/filters.elm.tpl
===================================================================
diff -u -N -r14894 -r14900
--- branches/1.0.x/elements/filters.elm.tpl	(.../filters.elm.tpl)	(revision 14894)
+++ branches/1.0.x/elements/filters.elm.tpl	(.../filters.elm.tpl)	(revision 14900)
@@ -56,7 +56,7 @@
 		<ul class="range">
 			<inp2:ListFilterOptions render_as="filter_range_value_element" pass_params="1"/>
 		</ul>
-		<div id="slider-vertical" style="height:260px;"></div>
+		<div class="slider-vertical" id="<inp2:FilterInputName/>_slider" style="height:260px;"></div>
 		<ul class="range2">
 			<inp2:ListFilterOptions render_as="filter_range_count_element" pass_params="1"/>
 		</ul>
@@ -66,17 +66,22 @@
 	<script type="text/javascript">
 		$(document).ready(
 			function() {
-				$( '#slider-vertical' ).slider({
+				$( '#' + jq('<inp2:FilterInputName/>_slider') ).slider({
 					orientation: 'vertical',
 					range: true,
 					min: <inp2:m_Get name="min_range_value"/>,
 					max: <inp2:m_Get name="max_range_value"/>,
 					step: <inp2:m_Get name="range_step"/>,
 					values: [<inp2:m_Get name="selected_from_range"/>, <inp2:m_Get name="selected_to_range"/>],
 					change: function(event, ui) {
-						// TODO: jQuery UI slider has inverted range, making top slider change bottom range and bottom slider changing top range
-						$('#' + jq('<inp2:FilterInputName/>')).val(ui.values[0] + '-' + ui.values[1]);
+						//  jQuery UI slider has inverted range - fix that here
+						var $range_step = <inp2:m_Get name="range_step"/>,
+							$range_min = <inp2:m_Get name="min_range_value"/>,
+							$range_max = <inp2:m_Get name="max_range_value"/>,
+							$min_value = $range_min + (($range_max - ui.values[1]) / $range_step) * $range_step,
+							$max_value = $range_max - ((ui.values[0] - $range_min) / $range_step) * $range_step;
 
+						$('#' + jq('<inp2:FilterInputName/>')).val($min_value + '-' + $max_value);
 						ListManager.updateFilterParams();
 					}
 				});
@@ -104,13 +109,9 @@
 		<script type="text/javascript">
 			$(document).ready(
 				function () {
-					ListManager.registerFilter('filter-form-<inp2:m_Param name="filter_field"/>');
+					ListManager.registerFilter('<inp2:m_Param name="filter_field"/>');
 				}
 			);
 		</script>
 	</form>
 </inp2:m_DefineElement>
-
-<inp2:m_DefineElement name="used_filter_element">
-	ListManager.replaceFilter('filter-form-<inp2:m_Param name="filter_field"/>', '<inp2:m_RenderElement name="filter_element" pass_params="1" js_escape="1"/>');
-</inp2:m_DefineElement>
\ No newline at end of file