javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(range): add dynamic value ranges

Browse Source
This commit is contained in:
Brandy Carney
2018-01-31 11:36:54 -05:00
parent 92b605e9b3
commit e2b7f64296
1 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,16 +33,34 @@
</ion-item>
<ion-item>
<ion-range pin="true" color="secondary" value="86">
<ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
<ion-icon small name="ios-sunny" slot="start"></ion-icon>
<ion-icon name="ios-sunny" slot="end"></ion-icon>
</ion-range>
<ion-range pin="true" color="danger" value="54">
<ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
<ion-icon small name="ios-thermometer" slot="start"></ion-icon>
<ion-icon name="ios-thermometer" slot="end"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Dynamic Value
</ion-list-header>
<ion-item>
<ion-range color="secondary" id="progressValue"></ion-range>
<div id="progressValueResult" slot="end"></div>
</ion-item>
<ion-item>
<ion-range color="danger" id="brightnessValue"></ion-range>
<div id="brightnessValueResult" slot="end"></div>
</ion-item>
<ion-item>
<ion-range color="dark" id="contrastValue"></ion-range>
<div id="contrastValueResult" slot="end"></div>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Mode
@@ -82,6 +100,23 @@
</ion-app>
<script>
var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];
for (var i = 0; i < ranges.length; i++) {
var el = document.getElementById(ranges[i]);
el.value = (i + 1) * 26;
updateRangeResult(el);
el.addEventListener('ionChange', function(ev) {
updateRangeResult(ev.currentTarget);
});
}
function updateRangeResult(el) {
var resultEl = document.getElementById(`${el.id}Result`);
resultEl.innerHTML = el.value;
}
var knob = document.getElementById('multiKnob')
var debounceRange = document.getElementById('debounce')
knob.value = {