r2095 - in trunk: tests/static/slider themes/base
Author: scottjehl
Date: Wed Feb 18 07:09:31 2009
New Revision: 2095
Added:
trunk/tests/static/slider/slider_horizontal_range_collision.html
trunk/tests/static/slider/slider_vertical_range_collision.html
Modified:
trunk/themes/base/ui.slider.css
Log:
Added a static demo and CSS solution for the common problem that occurs
when slider handles collide on the same value.
This will fix bug #3467
Added: trunk/tests/static/slider/slider_horizontal_range_collision.html
==============================================================================
--- (empty file)
+++ trunk/tests/static/slider/slider_horizontal_range_collision.html Wed
Feb 18 07:09:31 2009
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+ <title>Slider Static Test : Slider horizontal range</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+</head>
+<body>
+
+<div id="slider-horizontal-range" class="ui-slider ui-slider-horizontal
ui-slider-horizontal-collision ui-widget ui-widget-content ui-corner-all">
+ <div class="ui-slider-range ui-widget-header" style="width:0%; left:
75%;"></div>
+ <a href="#" class="ui-slider-handle ui-state-default ui-corner-left"
style="left: 75%;"></a>
+ <a href="#" class="ui-slider-handle ui-state-default ui-corner-right"
style="left: 75%;"></a>
+</div>
+
+</body>
+</html>
Added: trunk/tests/static/slider/slider_vertical_range_collision.html
==============================================================================
--- (empty file)
+++ trunk/tests/static/slider/slider_vertical_range_collision.html Wed Feb
18 07:09:31 2009
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+ <title>Slider Static Test : Slider vertical range</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+</head>
+<body>
+
+<div id="slider-vertical-range" class="ui-slider ui-slider-vertical
ui-slider-vertical-collision ui-widget ui-widget-content ui-corner-all">
+ <div class="ui-slider-range ui-widget-header" style="bottom: 75%;
height:0%;"></div>
+ <a href="#" class="ui-slider-handle ui-state-default ui-corner-bottom"
style="bottom: 75%;"></a>
+ <a href="#" class="ui-slider-handle ui-state-default ui-corner-top"
style="bottom: 75%;"></a>
+</div>
+
+</body>
+</html>
Modified: trunk/themes/base/ui.slider.css
==============================================================================
--- trunk/themes/base/ui.slider.css (original)
+++ trunk/themes/base/ui.slider.css Wed Feb 18 07:09:31 2009
@@ -6,12 +6,16 @@
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal-collision .ui-slider-handle { width: .6em; }
+.ui-slider-horizontal-collision .ui-corner-right { margin-left:0;
border-left: 0; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; position:
relative; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0;
margin-bottom: -.6em; }
+.ui-slider-vertical-collision .ui-slider-handle { height: .6em; }
+.ui-slider-vertical-collision .ui-corner-top { margin-bottom:0;
border-bottom: 0; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; position:
relative; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }