From f45cb501214d8fb0dae47bfc7c584ff6073863bb Mon Sep 17 00:00:00 2001
From: Austin Hyde <austin109@gmail.com>
Date: Tue, 28 Jan 2014 14:03:51 -0500
Subject: [PATCH 1/4] Add styles for .ol-touch .ol-zoomslider

---
 css/ol.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/css/ol.css b/css/ol.css
index 5b5ca519b9..95abebe92c 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -262,6 +262,15 @@ button.ol-full-screen-true:after {
   height: 20px;
   width: 24px;
 }
+.ol-touch .ol-zoomslider {
+  top: 82px;
+  width: 36px;
+}
+.ol-touch .ol-zoomslider-thumb {
+  height: 18px;
+  width: 30px;
+}
+
 .ol-zoom-extent button,
 .ol-attribution,
 .ol-full-screen button,

From a8dd1d29c8bf1f0d0a341eade94100569a2e7783 Mon Sep 17 00:00:00 2001
From: Austin Hyde <austin109@gmail.com>
Date: Wed, 29 Jan 2014 09:24:38 -0500
Subject: [PATCH 2/4] Fix zoomslider controls to match zoom controls more
 closely

---
 css/ol.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/ol.css b/css/ol.css
index 95abebe92c..2fb42f7419 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -253,14 +253,14 @@ button.ol-full-screen-true:after {
   position: absolute;
   display: block;
   padding: 0;
-  margin: 2px;
   background: #7b98bc;
   background: rgba(0,60,136,0.5);
+  margin: 3px;
   border-radius: 2px;
   outline: none;
   overflow: hidden;
   height: 20px;
-  width: 24px;
+  width: 22px;
 }
 .ol-touch .ol-zoomslider {
   top: 82px;

From a0fdc0ecf95c2110ca210b6831d4b74970c4ce46 Mon Sep 17 00:00:00 2001
From: Austin Hyde <austin109@gmail.com>
Date: Wed, 29 Jan 2014 09:25:30 -0500
Subject: [PATCH 3/4] Update the zoomslider example to have better styling for
 touch devices

---
 examples/zoomslider.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/examples/zoomslider.html b/examples/zoomslider.html
index cdb173dc33..a77c2c2273 100644
--- a/examples/zoomslider.html
+++ b/examples/zoomslider.html
@@ -19,15 +19,22 @@
 #map2 .ol-zoomslider {
   background-color: transparent;
   top: 34px;
-  left: 9px;
-  width: 24px;
 }
 #map2 .ol-zoomslider-thumb {
-  border-radius: 2px;
-  width: 24px;
   height: 12px;
 }
 
+#map2 .ol-touch .ol-zoom a.ol-zoom-out {
+  margin-top: 212px;
+}
+#map2 .ol-touch .ol-zoomslider {
+  top: 42px;
+  height: 210px;
+}
+#map2 .ol-touch .ol-zoomslider-thumb {
+  height: 20px;
+}
+
 /**
  * The zoomslider in the third map shall be horizontal, placed in the top-right
  * corner, smaller and orange.

From e62e537eedbd93233f507f10b164f1bd27b693db Mon Sep 17 00:00:00 2001
From: Steven Pukansky <steven.pukansky@intermedix.com>
Date: Mon, 10 Mar 2014 16:08:46 -0400
Subject: [PATCH 4/4] Update zoomslider custom styling to match control styling
 changes

---
 css/ol.css               | 32 ++++++++++++++++++--------------
 examples/zoomslider.html | 15 ++++-----------
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/css/ol.css b/css/ol.css
index 2fb42f7419..5dc3fe2d68 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -226,7 +226,7 @@ button.ol-full-screen-true:after {
 }
 .ol-zoom .ol-has-tooltip:hover [role=tooltip],
 .ol-zoom .ol-has-tooltip:focus [role=tooltip] {
-  bottom: 1.1em;
+  top: 1.1em;
 }
 .ol-full-screen .ol-has-tooltip:hover [role=tooltip],
 .ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
@@ -237,38 +237,42 @@ button.ol-full-screen-true:after {
 
 .ol-zoomslider {
   position: absolute;
-  top: 67px;
-  left: 8px;
+  top: 4.5em;
+  left: .5em;
+
   background: #eee;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 4px;
-  width: 28px;
-  height: 200px;
   outline: none;
   overflow: hidden;
-  padding: 0;
+  
+  width: 1.5675em;
+  height: 200px;
+  padding: 3px;
   margin: 0;
 }
 .ol-zoomslider-thumb {
   position: absolute;
   display: block;
-  padding: 0;
   background: #7b98bc;
   background: rgba(0,60,136,0.5);
-  margin: 3px;
   border-radius: 2px;
   outline: none;
   overflow: hidden;
-  height: 20px;
-  width: 22px;
+  cursor: pointer;
+
+  font-size: 1.14em;
+  height: 1em;
+  width: 1.375em;
+  margin: 3px;
+  padding: 0;
 }
 .ol-touch .ol-zoomslider {
-  top: 82px;
-  width: 36px;
+  top: 5.5em;
+  width: 2.052em;
 }
 .ol-touch .ol-zoomslider-thumb {
-  height: 18px;
-  width: 30px;
+  width: 1.8em;
 }
 
 .ol-zoom-extent button,
diff --git a/examples/zoomslider.html b/examples/zoomslider.html
index a77c2c2273..13995fecc8 100644
--- a/examples/zoomslider.html
+++ b/examples/zoomslider.html
@@ -13,26 +13,19 @@
  * The zoomslider in the second map shall be placed between the zoom-in and
  * zoom-out buttons.
  */
-#map2 .ol-zoom a.ol-zoom-out {
+#map2 .ol-zoom .ol-zoom-out {
   margin-top: 202px;
 }
 #map2 .ol-zoomslider {
   background-color: transparent;
-  top: 34px;
-}
-#map2 .ol-zoomslider-thumb {
-  height: 12px;
+  top: 2.3em;
 }
 
-#map2 .ol-touch .ol-zoom a.ol-zoom-out {
+#map2 .ol-touch .ol-zoom .ol-zoom-out { 
   margin-top: 212px;
 }
 #map2 .ol-touch .ol-zoomslider {
-  top: 42px;
-  height: 210px;
-}
-#map2 .ol-touch .ol-zoomslider-thumb {
-  height: 20px;
+  top: 2.75em;
 }
 
 /**