From f27ea160805dc2984191ecb63c2ad6d830ad37f4 Mon Sep 17 00:00:00 2001
From: Scott Jehl <scott@scottjehl.com>
Date: Wed, 18 Feb 2009 16:06:43 +0000
Subject: [PATCH] a couple tests to demonstrate how handles can potentially
 split a value

---
 .../slider_horizontal_range_collision.html    | 57 +++++++++++++++++++
 .../slider_vertical_range_collision.html      | 57 +++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 tests/visual/slider/slider_horizontal_range_collision.html
 create mode 100644 tests/visual/slider/slider_vertical_range_collision.html
diff --git a/tests/visual/slider/slider_horizontal_range_collision.html b/tests/visual/slider/slider_horizontal_range_collision.html
new file mode 100644
index 000000000..4751c2807
--- /dev/null
+++ b/tests/visual/slider/slider_horizontal_range_collision.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Slider Visual Test : Slider horizontal range with collision</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		//this function checks the slider handles and applies classes to make them visually split a value if they're equal
+		$.fn.checkCollision = function(){
+			if( $(this).slider('values', 0) == $(this).slider('values', 1) ){
+					if( $(this).is('.ui-slider-horizontal') ){
+						$(this).addClass('ui-slider-horizontal-collision');
+						$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-left');
+						$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-right');
+					}
+					else {
+						$(this).addClass('ui-slider-vertical-collision');
+						$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-bottom');
+						$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-top');
+					}
+				}
+				else if( $(this).is('.ui-slider-horizontal-collision, .ui-slider-vertical-collision') ) {
+					if( $(this).is('.ui-slider-horizontal') ){
+						$(this).removeClass('ui-slider-horizontal-collision');
+						$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-left');
+						$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-right');
+					}
+					else {
+						$(this).removeClass('ui-slider-vertical-collision');
+						$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-bottom');
+						$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-top');
+					}
+				}
+		};
+	
+	
+		$("#slider-horizontal-range").slider({
+			orientation: 'horizontal',
+			range: true,
+			values: [25, 75],
+			slide: $(this).checkCollision
+		})
+		.checkCollision();
+		
+	});
+	</script>
+</head>
+<body>
+
+<div id="slider-horizontal-range"></div>
+
+</body>
+</html>
diff --git a/tests/visual/slider/slider_vertical_range_collision.html b/tests/visual/slider/slider_vertical_range_collision.html
new file mode 100644
index 000000000..9195f7cc1
--- /dev/null
+++ b/tests/visual/slider/slider_vertical_range_collision.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Slider Visual Test : Slider vertical range with collision</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		//this function checks the slider handles and applies classes to make them visually split a value if they're equal
+		$.fn.checkCollision = function(){
+			if( $(this).slider('values', 0) == $(this).slider('values', 1) ){
+					if( $(this).is('.ui-slider-horizontal') ){
+						$(this).addClass('ui-slider-horizontal-collision');
+						$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-left');
+						$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-right');
+					}
+					else {
+						$(this).addClass('ui-slider-vertical-collision');
+						$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-bottom');
+						$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-top');
+					}
+				}
+				else if( $(this).is('.ui-slider-horizontal-collision, .ui-slider-vertical-collision') ) {
+					if( $(this).is('.ui-slider-horizontal') ){
+						$(this).removeClass('ui-slider-horizontal-collision');
+						$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-left');
+						$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-right');
+					}
+					else {
+						$(this).removeClass('ui-slider-vertical-collision');
+						$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-bottom');
+						$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-top');
+					}
+				}
+		};
+	
+	
+		$("#slider-vertical-range").slider({
+			orientation: 'vertical',
+			range: true,
+			values: [25, 75],
+			slide: $(this).checkCollision
+		})
+		.checkCollision();
+		
+	});
+	</script>
+</head>
+<body>
+
+<div id="slider-vertical-range"></div>
+
+</body>
+</html>
