large range hit area

dist/css/ionic-ios7.css

@@ -1445,24 +1445,6 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #999999; }
 
-input[type="range"] {
-  display: block;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  width: auto;
-  height: 4px;
-  outline: none;
-  border-radius: 4px;
-  background-color: #cccccc;
-  -webkit-appearance: none !important; }
-  input[type="range"]::-webkit-slider-thumb {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-    -webkit-appearance: none !important; }
-
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -1553,6 +1535,34 @@ input[type="checkbox"][readonly] {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
+input[type="range"] {
+  display: inline-block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: auto;
+  height: 4px;
+  outline: none;
+  border-radius: 4px;
+  background-color: #cccccc;
+  -webkit-appearance: none !important; }
+  input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    -webkit-appearance: none !important; }
+  input[type="range"]::-webkit-slider-thumb:after {
+    /* create a larger (but hidden) hit area */
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    display: table;
+    padding: 20px;
+    content: ' '; }
+
 .button {
   position: relative;
   display: inline-block;

dist/css/ionic-scoped.css

@@ -2088,23 +2088,6 @@
   .ionic input::-webkit-input-placeholder,
   .ionic textarea::-webkit-input-placeholder {
     color: #999999; }
-  .ionic input[type="range"] {
-    display: block;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    width: auto;
-    height: 4px;
-    outline: none;
-    border-radius: 4px;
-    background-color: #cccccc;
-    -webkit-appearance: none !important; }
-    .ionic input[type="range"]::-webkit-slider-thumb {
-      width: 20px;
-      height: 20px;
-      border-radius: 10px;
-      background-color: white;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-      -webkit-appearance: none !important; }
   .ionic input[disabled],
   .ionic select[disabled],
   .ionic textarea[disabled],
@@ -2225,6 +2208,33 @@
     .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
       /* show the checkmark icon when its checked */
       visibility: visible; }
+  .ionic input[type="range"] {
+    display: inline-block;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: auto;
+    height: 4px;
+    outline: none;
+    border-radius: 4px;
+    background-color: #cccccc;
+    -webkit-appearance: none !important; }
+    .ionic input[type="range"]::-webkit-slider-thumb {
+      position: relative;
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      background-color: white;
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
+      cursor: pointer;
+      -webkit-appearance: none !important; }
+    .ionic input[type="range"]::-webkit-slider-thumb:after {
+      /* create a larger (but hidden) hit area */
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      display: table;
+      padding: 20px;
+      content: ' '; }
   .ionic .button {
     position: relative;
     display: inline-block;

dist/css/ionic.css

@@ -2554,24 +2554,6 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #999999; }
 
-input[type="range"] {
-  display: block;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  width: auto;
-  height: 4px;
-  outline: none;
-  border-radius: 4px;
-  background-color: #cccccc;
-  -webkit-appearance: none !important; }
-  input[type="range"]::-webkit-slider-thumb {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-    -webkit-appearance: none !important; }
-
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -2715,6 +2697,34 @@ input[type="checkbox"][readonly] {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
+input[type="range"] {
+  display: inline-block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: auto;
+  height: 4px;
+  outline: none;
+  border-radius: 4px;
+  background-color: #cccccc;
+  -webkit-appearance: none !important; }
+  input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    -webkit-appearance: none !important; }
+  input[type="range"]::-webkit-slider-thumb:after {
+    /* create a larger (but hidden) hit area */
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    display: table;
+    padding: 20px;
+    content: ' '; }
+
 .button {
   position: relative;
   display: inline-block;

scss/ionic-ios7/ionic-ios7.scss

@@ -22,6 +22,7 @@
   "../ionic/form",
   "toggle",
   "../ionic/radio",
+  "../ionic/range",
 
   // Buttons
   "../ionic/button",

scss/ionic/_form.scss

@@ -248,30 +248,6 @@ textarea {
 }
 
 
-// Range
-// -------------------------------
-input[type="range"] {
-  display: block;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  width: auto;
-  height: $range-track-height;
-  outline: none;
-  border-radius: $range-track-height;
-  background-color: $range-track-color;
-  -webkit-appearance: none !important;
-
-  &::-webkit-slider-thumb {
-    width: $range-slider-width;
-    height: $range-slider-height;
-    border-radius: $range-slider-border-radius;
-    background-color: $toggle-handle-off-bg-color;
-    box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
-    -webkit-appearance: none !important;
-  }
-}
-
-
 // DISABLED STATE
 // -------------------------------
 

scss/ionic/_range.scss

@@ -0,0 +1,37 @@
+
+// Range
+// -------------------------------
+
+input[type="range"] {
+  display: inline-block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: auto;
+  height: $range-track-height;
+  outline: none;
+  border-radius: $range-track-height;
+  background-color: $range-track-color;
+  -webkit-appearance: none !important;
+
+  &::-webkit-slider-thumb {
+    position: relative;
+    width: $range-slider-width;
+    height: $range-slider-height;
+    border-radius: $range-slider-border-radius;
+    background-color: $toggle-handle-off-bg-color;
+    box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
+    cursor: pointer;
+    -webkit-appearance: none !important;
+  }
+
+  &::-webkit-slider-thumb:after {
+    /* create a larger (but hidden) hit area */
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    display: table;
+    padding: 20px;
+    content: ' ';
+  }
+  
+}

scss/ionic/ionic-scoped.scss

@@ -29,6 +29,7 @@
   "checkbox",
   "toggle",
   "radio",
+  "range",
 
   // Buttons
   "button",

scss/ionic/ionic.scss

@@ -27,6 +27,7 @@
   "checkbox",
   "toggle",
   "radio",
+  "range",
 
   // Buttons
   "button",