Skip to content
Permalink
Browse files

Added a static demo and CSS solution for the common problem that occu…

…rs when slider handles collide on the same value.

This will fix bug #3467
  • Loading branch information...
Scott Jehl
Scott Jehl committed Feb 18, 2009
1 parent 0708a84 commit 8a6935c526001f82de6830d5a3ea89e550a21247
@@ -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>
@@ -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>
@@ -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; }

0 comments on commit 8a6935c

Please sign in to comment.
You can’t perform that action at this time.