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

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>

 

float-range 컴포넌트를 위와 같이 사용할 수 있습니다.

그렇다면 float-range 컴포넌트는 어떻게 만들어야 할까요?

 

FloatRangeComponent

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

상세 설명

1. max, min, pin, snaps의 값은 그대로 ion-range에 적용할 수 있습니다.

2. 입력된 step에 따라 range를 재설정해주어야 합니다.

3. _changedValue()를 통해서 변경된 _ngModel 값을 parent Component로 전달해야 합니다.

float-range를 사용하는 부모 컴포넌트에서는 양방향 바인딩( [()] )을 하고 있지 않습니다.