hsunny study blog

[IONIC3] ion-range 소수점(float) 조절하기 본문

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를 사용하는 부모 컴포넌트에서는 양방향 바인딩( [()] )을 하고 있지 않습니다.