Question

标准离子范围具有可能值范围的最小/最大数量。

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

我想要的是自定义范围，例如，我希望滑块仅选择这些值：{1,5,7,20}。

我怎样才能做到这一点？

Answer 1

我尝试使用(ionChange)组件的Range事件，但我无法使其正常工作。相反，您可以使用几个按钮和禁用范围来创建自己的范围元素。请查看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的长度相匹配。这也可以通过计算数组长度动态完成。

{{customSteps}}将打印您的自定义值

HTML：

<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>

您的观察器功能会将滑块值转换为自定义值。请记住：自定义步骤数组必须与滑块的长度相同才能动态匹配数字。

代码：

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

离子2范围内的自定义数字

2 个答案: