diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 23e8ce7e90..9e14afe632 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2507,6 +2507,7 @@ input[type="checkbox"][readonly] {
* --------------------------------------------------
*/
input[type="range"] {
+ background-color: #cccccc;
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
@@ -2515,8 +2516,6 @@ input[type="range"] {
outline: none;
border-radius: 4px;
-webkit-appearance: none !important; }
- input[type="range"] input {
- background-color: #cccccc; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
@@ -2548,6 +2547,22 @@ input[type="range"] {
padding: 2px 4px; }
.range.range-light input {
background-color: #dddddd; }
+ .range.range-stable input {
+ background-color: #b2b2b2; }
+ .range.range-positive input {
+ background-color: #4a87ee; }
+ .range.range-calm input {
+ background-color: #43cee6; }
+ .range.range-balanced input {
+ background-color: #66cc33; }
+ .range.range-assertive input {
+ background-color: #ef4e3a; }
+ .range.range-energized input {
+ background-color: #f0b840; }
+ .range.range-royal input {
+ background-color: #8a6de9; }
+ .range.range-dark input {
+ background-color: #444444; }
.range .icon {
-webkit-box-flex: 0;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9b0675dc88..77a4fb546b 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -100,6 +100,14 @@
}
+// Range Mixins
+// --------------------------------------------------
+
+@mixin range-style($track-bg-color) {
+ background-color: $track-bg-color;
+}
+
+
// Utility Mixins
// --------------------------------------------------
diff --git a/scss/_range.scss b/scss/_range.scss
index c101bfed18..0f6c1b6f70 100644
--- a/scss/_range.scss
+++ b/scss/_range.scss
@@ -5,6 +5,7 @@
*/
input[type="range"] {
+ @include range-style($range-default-track-bg);
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
@@ -12,17 +13,8 @@ input[type="range"] {
height: $range-track-height;
outline: none;
border-radius: $range-track-height;
- background-color: $range-track-color;
-webkit-appearance: none !important;
- background-image: -webkit-gradient(
- linear,
- left top,
- right top,
- color-stop(0.0, blue),
- color-stop(0.0, $range-track-color)
- );
-
&::-webkit-slider-thumb {
position: relative;
width: $range-slider-width;
@@ -42,13 +34,41 @@ input[type="range"] {
padding: 25px;
content: ' ';
}
-
+
}
.range {
@include display-flex();
@include align-items(center);
padding: 2px 4px;
+
+ &.range-light {
+ input { @include range-style($range-light-track-bg); }
+ }
+ &.range-stable {
+ input { @include range-style($range-stable-track-bg); }
+ }
+ &.range-positive {
+ input { @include range-style($range-positive-track-bg); }
+ }
+ &.range-calm {
+ input { @include range-style($range-calm-track-bg); }
+ }
+ &.range-balanced {
+ input { @include range-style($range-balanced-track-bg); }
+ }
+ &.range-assertive {
+ input { @include range-style($range-assertive-track-bg); }
+ }
+ &.range-energized {
+ input { @include range-style($range-energized-track-bg); }
+ }
+ &.range-royal {
+ input { @include range-style($range-royal-track-bg); }
+ }
+ &.range-dark {
+ input { @include range-style($range-dark-track-bg); }
+ }
}
.range .icon {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 50f326edcd..a4f9c017b5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -442,13 +442,23 @@ $checkbox-check-color: #fff;
// Range
// -------------------------------
-$range-track-height: 4px;
-$range-track-color: #ccc;
-$range-slider-width: 20px;
-$range-slider-height: 20px;
-$range-slider-border-radius: 10px;
-$range-icon-size: 24px;
-$range-max-width: 320px;
+$range-track-height: 4px !default;
+$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;
+$range-positive-track-bg: $button-positive-bg !default;
+$range-calm-track-bg: $button-calm-bg !default;
+$range-balanced-track-bg: $button-balanced-bg !default;
+$range-assertive-track-bg: $button-assertive-bg !default;
+$range-energized-track-bg: $button-energized-bg !default;
+$range-royal-track-bg: $button-royal-bg !default;
+$range-dark-track-bg: $button-dark-bg !default;
+$range-default-track-bg: #ccc !default;
// Menus
diff --git a/test/input-range.html b/test/input-range.html
index a742efed6c..01da10739b 100644
--- a/test/input-range.html
+++ b/test/input-range.html
@@ -13,34 +13,77 @@
Input: Range
-
-