イオン2範囲のカスタム番号

Question

標準イオン範囲には、可能な値の範囲の最小値/最大値があります。 {1、5、7、20}：

<ion-range min="1" max="20" ...> 

は、私が欲しいのは、たとえば、私はスライダーだけで、これらの値を選択したい、カスタム範囲です。

どうすればこの問題を解決できますか？

Answer 1

Rangeコンポーネントの(ionChange)イベントで再生しようとしましたが、正しく動作させることができませんでした。代わりに、いくつかのボタンと無効な範囲を使用して独自の範囲要素を作成することができます。 this plunkerをご覧ください。

ボタンを追加すると値を増やすことができ、もう一方は値を減らすことができます。

<ion-content> 
    <ion-list> 
    <ion-list-header> 
    Your super cool value <ion-badge item-right>{{ value }}</ion-badge> 
    </ion-list-header> 
    <ion-item> 
    <ion-range disabled="true" step="1" min="1" max="20" [(ngModel)]="value"> 
     <ion-label range-left><button outline round small (click)="decrease()">-</button></ion-label> 
     <ion-label range-right><button outline round small (click)="increase()">+</button></ion-label> 
    </ion-range> 
    </ion-item> 
    </ion-list> 
</ion-content> 

そして、あなたのコードでは、あなただけの作業に必要なもの（この場合は1、5、7、20）

import { Component } from "@angular/core"; 

@Component({ 
    templateUrl:"home.html" 
}) 
export class HomePage { 

    private prevValue: number; 
    private value: number; 

    constructor() { 
    this.value = 1; 
    } 

    public decrease() { 
    if(this.value == 5) { 
     this.value = 1; 
     } else if(this.value == 7) { 
     this.value = 5; 
     } else if(this.value == 20) { 
     this.value = 7; 
     } 
    } 

    public increase() { 
    if(this.value == 1) { 
     this.value = 5; 
     } else if(this.value == 5) { 
     this.value = 7; 
     } else if(this.value == 7) { 
     this.value = 20; 
     } 
    } 
} 

Answer 2

の間の値を取る範囲の要素を強制することができますもう一度sebaferrerasの回答に答えてください。

まず、スライダを（ionChange）で追加し、min/maxをカスタムステップ[1,5,7,20] = 0-3の長さと一致するように設定します。これは、配列の長さを計算することによって動的に行うこともできます。あなたのウォッチャー機能があなたのカスタム値にスライダー値を変換します

<ion-navbar> 
    <ion-title> 
     Slider with uneven steps 
    </ion-title> 
</ion-navbar> 
<ion-content> 

    <ion-badge item-right>{{customSteps}}</ion-badge> 

    <ion-range 
     min="0" 
     max="3" 
     [(ngModel)]="slider" 
     (ionChange)="watchSlider()" 
     snaps="true"> 
    </ion-range> 

</ion-content> 

：

{{customStepsは}}カスタムが

HTML値出力します。注意：カスタムステップ配列は、数値を動的に一致させるには、スライダと同じ長さでなければなりません。

コード：

import {Component} from '@angular/core'; 
    @Component({ 
     templateUrl:"home.html", 
}) 
export class HomePage { 
    slider: any = 1; //Holding the actual slider values 
    customSteps: any; //Holding the custom values 

    constructor() { 
     this.watchSlider(); //initializing the slider 
    } 
    watchSlider(){ 
     //Converting slider-steps to custom values 

     const steps = [1, 5, 7, 20]; 
     this.customSteps = steps[this.slider]; 
    } 

} 

Plunker