diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 46b3ecceed2..b025ea905ed 100644
--- 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
index e926b51315f..cf531803c14 100644
--- 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;
+ }
+}
\ No newline at end of file
diff --git a/test/css/input-range.html b/test/css/input-range.html
index 446ee4519be..04985042f3d 100644
--- a/test/css/input-range.html
+++ b/test/css/input-range.html
@@ -8,7 +8,7 @@