From 4c62c16adb15f4d2224668e242be4cb32651924e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 5 Dec 2013 23:47:55 -0600
Subject: [PATCH] remove range max-width, create .range-label, closes #257

---
 dist/css/ionic.css             | 52 +++++++++++++++++++++-------------
 dist/css/themes/ionic-ios7.css |  1 -
 scss/_range.scss               | 35 ++++++++++++++++-------
 scss/_variables.scss           |  1 -
 4 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index d8799f0884..b53018083c 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
@@ -4574,12 +4573,11 @@ input[type="range"] {
   padding-right: 2px;
   padding-left: 1px;
   width: auto;
-  height: 4px;
   height: 35px;
   outline: none;
   background: linear-gradient(to right, #cccccc 0%, #cccccc 100%);
   background-position: center;
-  background-size: 96% 4px;
+  background-size: 99% 4px;
   background-repeat: no-repeat;
   -webkit-appearance: none; }
   input[type="range"]::-webkit-slider-thumb {
@@ -4595,17 +4593,17 @@ input[type="range"] {
     /* what creates the colorful line on the left side of the slider */
     position: absolute;
     top: 8px;
-    left: -320px;
-    width: 320px;
+    left: -2001px;
+    width: 2000px;
     height: 4px;
     background: #444444;
     content: ' '; }
   input[type="range"]::-webkit-slider-thumb:after {
     /* create a larger (but hidden) hit area */
     position: absolute;
-    top: -15px;
-    left: -15px;
-    padding: 25px;
+    top: -20px;
+    left: -20px;
+    padding: 30px;
     content: ' '; }
 
 .range {
@@ -4642,29 +4640,45 @@ input[type="range"] {
 
 .range .icon {
   -webkit-box-flex: 0;
-  -webkit-flex: 0 1 24px;
+  -webkit-flex: 0;
   -moz-box-flex: 0;
-  -moz-flex: 0 1 24px;
-  -ms-flex: 0 1 24px;
-  flex: 0 1 24px;
+  -moz-flex: 0;
+  -ms-flex: 0;
+  flex: 0;
   display: block;
   min-width: 24px;
   text-align: center;
   font-size: 24px; }
 
 .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;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: block;
   margin-right: 10px;
   margin-left: 10px;
-  max-width: 320px;
   width: 100%; }
 
+.range-label {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  display: block;
+  white-space: nowrap; }
+
+.range-label:first-child {
+  padding-left: 5px; }
+
+.range input + .range-label {
+  padding-right: 5px;
+  padding-left: 0; }
+
 /**
  * Buttons
  * --------------------------------------------------
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 1e5a055c50..23bcd03921 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
diff --git a/scss/_range.scss b/scss/_range.scss
index 2b048b6075..1809e839b9 100644
--- a/scss/_range.scss
+++ b/scss/_range.scss
@@ -12,12 +12,11 @@ input[type="range"] {
   padding-right: 2px;
   padding-left: 1px;
   width: auto;
-  height: $range-track-height;
   height: $range-slider-height + 15;
   outline: none;
   background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
   background-position: center;
-  background-size: 96% $range-track-height;
+  background-size: 99% $range-track-height;
   background-repeat: no-repeat;
   -webkit-appearance: none;
 
@@ -36,8 +35,8 @@ input[type="range"] {
     /* what creates the colorful line on the left side of the slider */
     position: absolute;
     top: ($range-slider-height / 2) - ($range-track-height / 2);
-    left: $range-max-width * -1;
-    width: $range-max-width;
+    left: -2001px;
+    width: 2000px;
     height: $range-track-height;
     background: $dark;
     content: ' ';
@@ -46,10 +45,12 @@ input[type="range"] {
   &::-webkit-slider-thumb:after {
     /* create a larger (but hidden) hit area */
     position: absolute;
-    top: -15px;
-    left: -15px;
-    padding: 25px;
+    top: -20px;
+    left: -20px;
+    padding: 30px;
     content: ' ';
+    //background: red;
+    //opacity: .5;
   }
 
 }
@@ -89,7 +90,7 @@ input[type="range"] {
 }
 
 .range .icon {
-  @include flex(0, 1, $range-icon-size);
+  @include flex(0);
   display: block;
   min-width: $range-icon-size;
   text-align: center;
@@ -97,10 +98,24 @@ input[type="range"] {
 }
 
 .range input {
-  @include flex(0, 1, $range-max-width - ($range-icon-size * 2));
+  @include flex(1);
   display: block;
   margin-right: 10px;
   margin-left: 10px;
-  max-width: $range-max-width;
   width: 100%;
 }
+
+.range-label {
+  @include flex(0, 0, auto);
+  display: block;
+  white-space: nowrap;
+}
+
+.range-label:first-child {
+  padding-left: 5px;
+}
+.range input + .range-label {
+  padding-right: 5px;
+  padding-left: 0;
+}
+
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 70d6bd67ff..27847f8861 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -451,7 +451,6 @@ $range-slider-width:           20px !default;
 $range-slider-height:          20px !default;
 $range-slider-border-radius:   10px !default;
 $range-icon-size:              24px !default;
-$range-max-width:              320px !default;
 
 $range-light-track-bg:         $button-light-border !default;
 $range-stable-track-bg:        $button-stable-border !default;