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 @@