From fd17576d0b71e8268a3efc50e72b4a9febca5c98 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 19 Nov 2013 14:28:40 -0600
Subject: [PATCH] range icons

---
 dist/css/ionic.css    | 47 ++++++++++++++++++++++++++++++++++++++-----
 scss/_range.scss      | 37 ++++++++++++++++++++++++++++++----
 scss/_variables.scss  |  2 ++
 test/input-range.html |  6 ++++++
 4 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index bc8e1c3467..3023c6a2fa 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2503,7 +2503,8 @@ input[type="range"] {
   outline: none;
   border-radius: 4px;
   background-color: #cccccc;
-  -webkit-appearance: none !important; }
+  -webkit-appearance: none !important;
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, blue), color-stop(0, #cccccc)); }
   input[type="range"]::-webkit-slider-thumb {
     position: relative;
     width: 20px;
@@ -2516,12 +2517,48 @@ input[type="range"] {
   input[type="range"]::-webkit-slider-thumb:after {
     /* create a larger (but hidden) hit area */
     position: absolute;
-    top: -10px;
-    left: -10px;
-    display: table;
-    padding: 20px;
+    top: -15px;
+    left: -15px;
+    padding: 25px;
     content: ' '; }
 
+.range {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center;
+  padding: 4px;
+  max-width: 320px; }
+
+.range .icon {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 24px;
+  -moz-box-flex: 0;
+  -moz-flex: 0 1 24px;
+  -ms-flex: 0 1 24px;
+  flex: 0 1 24px;
+  font-size: 24px;
+  min-width: 24px;
+  text-align: center; }
+
+.range input {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 272px;
+  -moz-box-flex: 0;
+  -moz-flex: 0 1 272px;
+  -ms-flex: 0 1 272px;
+  flex: 0 1 272px;
+  margin-left: 10px;
+  margin-right: 10px;
+  width: 100%;
+  max-width: 320px; }
+
 /**
  * Buttons
  * --------------------------------------------------
diff --git a/scss/_range.scss b/scss/_range.scss
index 06d848de99..53e45850ca 100644
--- a/scss/_range.scss
+++ b/scss/_range.scss
@@ -15,6 +15,14 @@ input[type="range"] {
   background-color: $range-track-color;
   -webkit-appearance: none !important;
 
+  background-image: -webkit-gradient(
+      linear,
+      left top,
+      right top,
+      color-stop(0.0, blue),
+      color-stop(0.0, $range-track-color)
+  );
+
   &::-webkit-slider-thumb {
     position: relative;
     width: $range-slider-width;
@@ -29,11 +37,32 @@ input[type="range"] {
   &::-webkit-slider-thumb:after {
     /* create a larger (but hidden) hit area */
     position: absolute;
-    top: -10px;
-    left: -10px;
-    display: table;
-    padding: 20px;
+    top: -15px;
+    left: -15px;
+    padding: 25px;
     content: ' ';
   }
   
 }
+
+.range {
+  @include display-flex();
+  @include align-items(center);
+  padding: 4px;
+  max-width: $range-max-width;
+}
+
+.range .icon {
+  @include flex(0, 1, $range-icon-size);
+  font-size: $range-icon-size;
+  min-width: $range-icon-size;
+  text-align: center;
+}
+
+.range input {
+  @include flex(0, 1, $range-max-width - ($range-icon-size * 2));
+  margin-left: 10px;
+  margin-right: 10px;
+  width: 100%;
+  max-width: $range-max-width;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3804d69d49..50f326edcd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -447,6 +447,8 @@ $range-track-color:            #ccc;
 $range-slider-width:           20px;
 $range-slider-height:          20px;
 $range-slider-border-radius:   10px;
+$range-icon-size:              24px;
+$range-max-width:              320px;
 
 
 // Menus
diff --git a/test/input-range.html b/test/input-range.html
index 726162d5b4..3cc94b5424 100644
--- a/test/input-range.html
+++ b/test/input-range.html
@@ -21,6 +21,12 @@
           <input type="range" name="awesomeness" min="0" max="10" value="10">
         </p>
 
+        <div class="range">
+          <i class="icon ion-volume-low"></i>
+          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <i class="icon ion-volume-high"></i>
+        </div>
+
         <div class="padding">
           <p><a class="button button-secondary" href="index.html">Homepage</a></p>
         </div>