diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 188ea0b76cf..fb44750d1f0 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -12,7 +12,7 @@ $range-ios-slider-height: 42px !default;
$range-ios-hit-width: 42px !default;
$range-ios-hit-height: $range-ios-slider-height !default;
-$range-ios-bar-height: 1px !default;
+$range-ios-bar-height: 2px !default;
$range-ios-bar-background-color: #bdbdbd !default;
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
@@ -67,6 +67,8 @@ ion-range {
width: 100%;
height: $range-ios-bar-height;
+ border-radius: 1px;
+
background: $range-ios-bar-background-color;
pointer-events: none;
@@ -166,6 +168,11 @@ ion-range {
transform: translate3d(0, 0, 0) scale(1);
}
+.range-disabled {
+ opacity: 0.5;
+}
+
+
// Generate iOS Range Colors
// --------------------------------------------------
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 1fa700c2fee..1c0bc12d903 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -220,6 +220,19 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
@include md-range-min();
+.range-disabled {
+ .range-bar-active {
+ background-color: $range-md-bar-background-color;
+ }
+
+ .range-knob {
+ transform: scale(.55);
+ background-color: $range-md-bar-background-color;
+ outline: 5px solid white;
+ }
+
+}
+
// Generate Material Design Range Colors
// --------------------------------------------------
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index b5e56745793..a69bfe8b59f 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -356,6 +356,12 @@ export class Range {
* @private
*/
pointerDown(ev: UIEvent) {
+ // TODO: we could stop listening for events instead of checking this._disabled.
+ // since there are a lot of events involved, this solution is
+ // enough for the moment
+ if (this._disabled) {
+ return;
+ }
console.debug(`range, ${ev.type}`);
// prevent default so scrolling does not happen
diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html
index b93199fb7be..ace0d3ada0a 100644
--- a/src/components/range/test/basic/page1.html
+++ b/src/components/range/test/basic/page1.html
@@ -43,6 +43,14 @@
+
+ disabled
+
+
+
+
+
+
step=100, snaps, {{singleValue4}}