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; + })