programming/IONIC
[IONIC3] ion-range 소수점(float) 조절하기
헤써니
2020. 6. 21. 14:48
IONIC에서 기본적으로 제공하는 range 값은 정수형입니다.
ion-range로 소수점을 조절할 경우가 필요할 수 있는데요, 이러한 경우에 유용하게 사용할 수 있습니다.
사용예
|
<float-range
[min]="rangeLimit.minimum"
[max]="rangeLimit.maxinum"
pin="true"
step="0.5"
[_ngModel]="selectedInfo.weight"
(changedValue)="detectWeightValue($event)">
</float-range>
|
min, max: range의 최솟값, 최댓값
pin: 사용자가 설정한 값이 노출되도록(손가락을 왔다 갔다 하면 현재 내가 선택한 값이 뭔지 보입니다.)
step: 조절되는 값 (여기서는 0.5씩 조절합니다)
_ngModel: weight의 기본값으로 설정하기 위해서 사용
changedValue: 사용자가 변경하는 대로 weight의 값을 변경하기 위해서 사용
float-range 컴포넌트를 위와 같이 사용할 수 있습니다.
그렇다면 float-range 컴포넌트는 어떻게 만들어야 할까요?
FloatRangeComponent
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Range } from 'ionic-angular';
@Component({
selector: 'float-range',
template: `
<ion-range #range (ionChange)= "detectChange($event)"[min]="min" [max]="max" [pin]="pin" [step]="step" [snaps]="snaps" [(ngModel)]="_ngModel"></ion-range>
`
})
export class FloatRangeComponent {
@Input() max: number;
@Input() min: number;
@Input() pin: boolean;
@Input() step: number;
@Input() snaps: boolean;
@Input() _ngModel: number;
@Output() changedValue = new EventEmitter();
@ViewChild('range')
set range(range: Range) {
let floatRange: FloatRangeComponent = this;
range._ratioToValue = function (ratio: number) {
this._step = Math.round(floatRange.step * 100) / 100;
ratio = (this._max - this._min) * ratio;
ratio = (ratio / this._step) * this._step + this._min;
return Math.round(ratio * (1 / this._step)) / (1 / this._step);
}
}
detectChange(value: any) {
this.changedValue.emit(value._value);
}
}
|
cs |
상세 설명
1. max, min, pin, snaps의 값은 그대로 ion-range에 적용할 수 있습니다.
2. 입력된 step에 따라 range를 재설정해주어야 합니다.
3. _changedValue()를 통해서 변경된 _ngModel 값을 parent Component로 전달해야 합니다.
float-range를 사용하는 부모 컴포넌트에서는 양방향 바인딩( [()] )을 하고 있지 않습니다.