クラス IgxSliderComponent

Ignite UI for Angular Slider - ヘルプ

TIgnite UI Slider を使用すると、つまみをトラックで移動して指定した範囲内で値選択を許可します。 トラックを連続またはステップに定義でき、単一または範囲によってスライダーのタイプを選択できます。

例:

<igx-slider id="slider"
[minValue]="0" [maxValue]="100"
[continuous]=true [(ngModel)]="volume">
</igx-slider>

階層

Hierarchy

  • IgxSliderComponent

実装

  • ControlValueAccessor
  • EditorProvider
  • OnInit
  • AfterViewInit
  • AfterContentInit
  • OnChanges
  • OnDestroy

コンストラクタ

プロパティ

dragFinished: EventEmitter<number | IRangeSliderValue> = ...

このイベントは、各スライド操作の終了時に発生します。

public change(event){
alert("The value has been changed!");
}
<igx-slider (dragFinished)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
id: string = ...

Input

id 属性の値を設定する @Input プロパティ。 提供されていない場合は、自動的に生成されます。

<igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
lowerValueChange: EventEmitter<number> = ...

このイベントは、範囲スライダーの低い値が変更されるたびに発生します。

public change(value){
alert(`The lower value has been changed to ${value}`);
}
<igx-slider [(lowerValue)]="model.lowervalue" (lowerValueChange)="change($event)" [step]="5">
primaryTickLabels: boolean = true

プライマリ目盛りラベルを表示/非表示します。

<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>
secondaryTickLabels: boolean = true

セカンダリ目盛りラベルを表示/非表示します。

<igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider>
showTicks: boolean = false

スライダー目盛りを表示/非表示します。

<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>
thumbLabelVisibilityDuration: number = 750

Input

つまみのラベルの表示期間を設定する @Input プロパティ。デフォルト値は 750 ミリ秒です。

<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
tickLabelsOrientation: TickLabelsOrientation = TickLabelsOrientation.Horizontal

目盛りラベルの回転を変更します。 horizontal - デフォルトの回転。 toptobottom - 目盛りラベルを垂直に 90 度回転します。 bottomtotop - 目盛りラベルを垂直に -90 度回転します。

<igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider>
ticksOrientation: TicksOrientation = TicksOrientation.Bottom

目盛りの方向を変更します。 bottom - Tフォルトの方向、スライダー トラックの下。 top - スライダー トラックの上。 mirror - 上下の方向を組み合わせます。

<igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider>
upperValueChange: EventEmitter<number> = ...

このイベントは、範囲スライダーの高い値が変更されるたびに発生します。

public change(value){
alert(`The upper value has been changed to ${value}`);
}
<igx-slider [(upperValue)]="model.uppervalue" (upperValueChange)="change($event)" [step]="5">
valueChange: EventEmitter<ISliderValueChangeEventArgs> = ...

このイベントは、値が変更されたときに発生されます。

public change(event){
alert("The value has been changed!");
}
<igx-slider (valueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">

アクセサー

  • get context(): any
  • IgxThumbFromTemplateDirective および IgxThumbToTemplateDirective テンプレートに対応するテンプレートコンテキストを返します。

    return {
    $implicit // ラベルの値を返します。
    labels // ユーザーが渡したラベル コレクションを返します。
    }

    返却 any

  • get continuous(): boolean
  • IgxSliderComponent が連続として設定されているかどうかを返します。

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let continuous = this.slider.continuous;
    }

    返却 boolean

  • set continuous(continuous: boolean): void
  • Input

    IgxSliderComponent を連続として設定する @Input プロパティ。 デフォルトで IgxSliderComponent は不連続です。 不連続 IgxSliderComponent スライダーには、トラック上にステップ インジケーターがあり、操作中に表示されるつまみラベルがあります。 連続 IgxSliderComponent には目盛がなく、値にバブル ラベルを表示しません。

    <igx-slider #slider [continuous]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
    

    パラメーター

    • continuous: boolean

    返却 void

  • get labels(): (string | number | boolean)[]
  • 複数の要素を持つプリミティブ値のコレクションを受け入れることによって、labelView を有効にします。 各要素はスライダー上に均等に広がり、サムラベルとして機能します。 プロパティが設定されると、maxValue、minValue、step よりも優先されます。 つまり、これらのプロパティに対する操作は許可されません。

    返却 (string | number | boolean)[]

  • set labels(labels: (string | number | boolean)[]): void
  • パラメーター

    • labels: (string | number | boolean)[]

    返却 void

  • get labelsViewEnabled(): boolean
  • ラベルが有効かどうかを返します。 labels が設定されていると、ビューは自動的にアクティブになります。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    let labelView = this.slider.labelsViewEnabled;

    返却 boolean

  • get lowerBound(): number
  • IgxSliderComponent の設定可能な値の下限を返します。 設定されていない場合、minValue を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let sliderLowBound = this.slider.lowerBound;
    }

    返却 number

  • set lowerBound(value: number): void
  • IgxSliderComponent の設定可能な値の下限を設定します。 設定しない場合は、最小値と同じです。

    <igx-slider [step]="5" [lowerBound]="20">
    

    パラメーター

    • value: number

    返却 void

  • get maxValue(): number
  • IgxSliderComponent に表示される最大トラック値を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let sliderMax = this.slider.maxValue;
    }

    返却 number

  • set maxValue(value: number): void
  • IgxSliderComponent に表示される最大トラック値を設定します。 デフォルトの最大値は 100 です。

    <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">
    

    パラメーター

    • value: number

    返却 void

  • get minValue(): number
  • IgxSliderComponent に表示される最小トラック値を返します。

     @ViewChild("slider2")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let sliderMin = this.slider.minValue;
    }

    返却 number

  • set minValue(value: number): void
  • IgxSliderComponent に表示される最小トラック値を設定します。 デフォルトの最小値は 0 です。

    <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">
    

    パラメーター

    • value: number

    返却 void

  • get secondaryTicks(): number
  • 提示されたセカンダリ目盛りの数を返します。

    const secondaryTicks = this.slider.secondaryTicks;
    

    返却 number

  • set secondaryTicks(val: number): void
  • セカンダリ目盛りの数を設定します。labels が有効になっている場合でも、 プロパティは機能しますが、すべてのセカンダリ目盛りには目盛りラベルが表示されません。

    this.slider.secondaryTicks = 5;
    

    パラメーター

    • val: number

    返却 void

  • get step(): number
  • IgxSliderComponent の増分/減分ドラッグ ステップを返します。

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let step = this.slider.step;
    }

    返却 number

  • set step(step: number): void
  • Input

    つまみドラッグ時の値を増加/減少する段階を設定する @Input プロパティ。 デフォルトの段階は 1 です。段階を 0 以下に設定しないでください。

    <igx-slider #slider [(ngModel)]="task.percentCompleted" [step]="5">
    

    パラメーター

    • step: number

    返却 void

  • get type(): IgxSliderType
  • Input

    IgxSliderComponent のタイプを取得する @Input プロパティ。 スライダーを IgxSliderType.SLIDER (デフォルト値) または IgxSliderType.RANGE に設定できます。

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let type = this.slider.type;
    }

    返却 IgxSliderType

  • set type(type: IgxSliderType): void
  • Input

    IgxSliderComponent のタイプを設定する @Input プロパティ。 スライダーを IgxSliderType.SLIDER (デフォルト値) または IgxSliderType.RANGE に設定できます。

    sliderType: IgxSliderType = IgxSliderType.RANGE;
    
    <igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
    

    パラメーター

    返却 void

  • get upperBound(): number
  • IgxSliderComponent の設定可能な値の上限を返します。 設定されていない場合、maxValue を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    ngAfterViewInit(){
    let sliderUpBound = this.slider.upperBound;
    }

    返却 number

  • set upperBound(value: number): void
  • IgxSliderComponent の上限を設定します。 設定しない場合は、最大値と同じです。

    <igx-slider [step]="5" [upperBound]="20">
    

    パラメーター

    • value: number

    返却 void

  • get upperValue(): number
  • RANGE IgxSliderComponent の高い値を返します。 SLIDER IgxSliderComponentvalue を返します。

     @ViewChild("slider2")
    public slider: IgxSliderComponent;
    public upperValue(event){
    let upperValue = this.slider.upperValue;
    }

    返却 number

  • set upperValue(value: number): void
  • RANGE IgxSliderComponent の高い値を設定します。

     @ViewChild("slider2")
    public slider: IgxSliderComponent;
    public upperValue(event){
    this.slider.upperValue = value;
    }

    パラメーター

    • value: number

    返却 void

  • get value(): number | IRangeSliderValue
  • スライダーの値を返します。スライダーのタイプが IgxSliderType.SLIDER の場合、返された値は数値です。 スライダーが IgxSliderType.RANGE の場合、 戻り値は lowerValue と upperValue のオブジェクトを表します。

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    public sliderValue(event){
    let sliderVal = this.slider.value;
    }

    返却 number | IRangeSliderValue

  • set value(value: number | IRangeSliderValue): void
  • スライダーの値を設定します。 スライダーのタイプが IgxSliderType.SLIDER の場合、引数は数値です。 デフォルトで value は lowerBound を取得します。 スライダー タイプが IgxSliderType.RANGE の場合、 引数は lowerValue および upperValue プロパティのオブジェクトを表します。 デフォルトでは、オブジェクトは lowerBound および upperBound プロパティ値に関連付けられています。

    rangeValue = {
    lower: 30,
    upper: 60
    };
    <igx-slider [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="56" [maxValue]="256">
    

    パラメーター

    返却 void

メソッド