javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(range): update range ratio when new min/max are passed (#15512)

Browse Source 
fixes #15511
This commit is contained in:
Alessandro Genova
2018-09-13 13:29:28 -04:00
committed by Manu MA
parent db35af21f2
commit f62601fb0a
2 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/range/range.tsx
View File

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

27
core/src/components/range/test/basic/index.html
View File

@ -99,6 +99,21 @@
</ion-list>
<ion-button onclick="elTest()">Test</ion-button>
<ion-list>
<ion-list-header>
Coupled sliders
</ion-list-header>
<ion-item>
<ion-range min="0" value="0" max="50" id="minRange"></ion-range>
</ion-item>
<ion-item>
<ion-range min="50" value="100" max="100" id="maxRange"></ion-range>
</ion-item>
<ion-item>
<ion-range min="0" value="50" max="100" id="targetRange"></ion-range>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
@ -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;
})
</script>
</body>