diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 4ab2866475..e30280f1a2 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -68,11 +68,23 @@ export class Range {
* Minimum integer value of the range. Defaults to `0`.
*/
@Prop() min = 0;
+ @Watch('min')
+ protected minChanged() {
+ if (!this.noUpdate) {
+ this.updateRatio();
+ }
+ }
/**
* Maximum integer value of the range. Defaults to `100`.
*/
@Prop() max = 100;
+ @Watch('max')
+ protected maxChanged() {
+ if (!this.noUpdate) {
+ this.updateRatio();
+ }
+ }
/**
* If true, a pin with integer value is shown when the knob
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index dbdef6fe92..260d7c7ea0 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -99,6 +99,21 @@
Test
+
+
+
+ Coupled sliders
+
+
+
+
+
+
+
+
+
+
+
@@ -168,6 +183,18 @@
var range = document.getElementById('range');
range.disabled = !range.disabled;
}
+
+ const minRange = document.getElementById('minRange');
+ const maxRange = document.getElementById('maxRange');
+ const targetRange = document.getElementById('targetRange');
+
+ minRange.addEventListener('ionChange', function(ev) {
+ targetRange.min = ev.detail.value;
+ })
+
+ maxRange.addEventListener('ionChange', function(ev) {
+ targetRange.max = ev.detail.value;
+ })