fix(range): Display range inputs on WP Closes #3479

ionic-team · Apr 22, 2015 · e8ecfe9 · e8ecfe9
1 parent 63a0834
commit e8ecfe9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -119,6 +119,9 @@
   &::-webkit-slider-thumb:before {
     background: $track-bg-color;
   }
+  &::-ms-fill-lower{
+    background: $track-bg-color;
+  }
 }
 
 

diff --git a/scss/_range.scss b/scss/_range.scss
@@ -33,7 +33,7 @@
     border: 0;
   }
 
-  &::-webkit-slider-thumb:before {
+  &::-webkit-slider-thumb:before{
     /* what creates the colorful line on the left side of the slider */
     position: absolute;
     top: ($range-slider-height / 2) - ($range-track-height / 2);
@@ -54,7 +54,32 @@
     //background: red;
     //opacity: .5;
   }
-
+   &::-ms-track{
+     background: transparent;
+     border-color: transparent;
+     border-width: 11px 0 16px;
+     color:transparent;
+     margin-top:20px;
+   }
+   &::-ms-thumb {
+     width: $range-slider-width;
+     height: $range-slider-height;
+     border-radius: $range-slider-border-radius;
+     background-color: $toggle-handle-off-bg-color;
+     border-color:$toggle-handle-off-bg-color;
+     box-shadow: $range-slider-box-shadow;
+     margin-left:1px;
+     margin-right:1px;
+     outline:none;
+   }
+   &::-ms-fill-lower{
+     height: $range-track-height;
+     background:$dark;
+   }
+   &::-ms-fill-upper {
+     height: $range-track-height;
+     background:$range-default-track-bg;
+   }
 }
 
 .range {
@@ -119,3 +144,10 @@
   padding-right: 5px;
   padding-left: 0;
 }
+
+// WP range height must be auto
+.platform-windowsphone{
+  .range input{
+    height:auto;
+  }
+}
diff --git a/test/css/input-range.html b/test/css/input-range.html
@@ -8,7 +8,7 @@
     <link href="../../dist/css/ionic.css" rel="stylesheet">
     <style>
       body {
-        position: absolute;;
+        position: absolute;
       }
     </style>
   </head>