Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Ionic
- border-width
- fromEvent
- IONIC3
- NVM
- 테두리굵기
- Git
- ChangeDetectorRef
- angular5
- JavaScript
- aab 배포
- php
- getElementsByClassName
- sealize
- zsh
- angular
- change detection
- rxjs
- ion-range
- 변화감지
- 자바스크립개념
- Visual Studio Code
- Sentry
- 이미지바꾸기
- oh-my-zsh
- hashchange
- VSCode
- typescript
- error
- code .
Archives
- Today
- Total
hsunny study blog
[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>
|
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를 사용하는 부모 컴포넌트에서는 양방향 바인딩( [()] )을 하고 있지 않습니다.
'programming > IONIC' 카테고리의 다른 글
[error] ionic serve Cannot GET / (0) | 2021.08.18 |
---|---|
[IONIC3] 센트리 릴리즈 아이디 고정하기 (0) | 2020.08.30 |
[IONIC3] Android Studio 없이 android app bundle 만들기 (0) | 2020.01.08 |
[IONIC3] 모달창을 작게 띄우기 (0) | 2020.01.08 |
[IONIC3] 캐시된 이미지를 삭제하는 방법 (0) | 2019.07.28 |