クラス IgxSliderComponent

Ignite UI for Angular Slider - ヘルプ

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

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

階層

  • IgxSliderComponent

実装

  • ControlValueAccessor
  • EditorProvider
  • OnInit
  • AfterViewInit
  • AfterContentChecked
  • OnDestroy

コンストラクタ

constructor

  • new IgxSliderComponent(renderer: Renderer2, _el: ElementRef, _cdr: ChangeDetectorRef): IgxSliderComponent

プロパティ

id

id: string = `igx-slider-${NEXT_ID++}`

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

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

onValueChange

onValueChange: EventEmitter<ISliderValueChangeEventArgs> = new EventEmitter<ISliderValueChangeEventArgs>()

このイベントは、ユーザーがつまみ操作を中止して値が変更されたときに発生されます。

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

thumbLabelVisibilityDuration

thumbLabelVisibilityDuration: number = 750

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

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

アクセサー

context

  • get context(): any

continuous

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

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

    返却 boolean

  • IgxSliderComponent を連続としてて設定する @Input プロパティ。 IgxSliderComponent はデフォルトで不連続です。 不連続 IgxSliderComponent には目盛がなく、値にバブル ラベルを表示しません。

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

    パラメーター

    • continuous: boolean

    返却 void

disabled

  • get disabled(): boolean
  • set disabled(disable: boolean): void
  • IgxSliderComponent が無効かどうかを返します。

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

    返却 boolean

  • UI 操作を無効または有効にする @Input プロパティ。

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

    パラメーター

    • disable: boolean

    返却 void

isRange

  • get isRange(): boolean
  • IgxSliderComponent の type が RANGE かどうかを返します。

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

    返却 boolean

labels

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

    返却 (string | number | false | true)[]

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

    パラメーター

    • labels: Array<number | string | boolean | null | undefined>

    返却 void

labelsViewEnabled

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

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

    返却 boolean

lowerBound

  • get lowerBound(): number
  • set lowerBound(value: number): void
  • IgxSliderComponent の下限を返します。

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

    返却 number

  • IgxSliderComponent の下限を設定します。 設定しない場合は、最小値と同じです。

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

    パラメーター

    • value: number

    返却 void

lowerLabel

  • get lowerLabel(): string | number | false | true
  • 下位ラベルに対応する値を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    let label = this.slider.lowerLabel;

    返却 string | number | false | true

lowerValue

  • get lowerValue(): number
  • set lowerValue(value: number): void
  • IgxSliderComponent の下値を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    public lowValue(event){
       let sliderLowValue = this.slider.lowerValue;
    }

    返却 number

  • IgxSliderComponent の下値を設定します。

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    public lowValue(event){
       this.slider.lowerValue = 120;
    }

    パラメーター

    • value: number

    返却 void

maxValue

  • get maxValue(): number
  • set maxValue(value: number): void
  • IgxSliderComponent の最大値を返します。

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

    返却 number

  • IgxSliderComponent の最大値を設定します。 デフォルトの最大値は 100 です。

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

    パラメーター

    • value: number

    返却 void

minValue

  • get minValue(): number
  • set minValue(value: number): void
  • IgxSliderComponent の最小値を返します。

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

    返却 number

  • IgxSliderComponent の最小値を設定します。 デフォルトの最小値は 0 です。

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

    パラメーター

    • value: number

    返却 void

step

  • get step(): number
  • set step(step: number): void
  • Returns the incremental/decremental dragging step of the IgxSliderComponent.

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

    返却 number

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

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

    パラメーター

    • step: number

    返却 void

type

  • IgxSliderComponent のタイプを取得する @Input プロパティ。スライダーを SliderType.SLIDER (デフォルト値) または SliderType.RANGE に設定できます。 `typescript @ViewChild("slider2") public slider: IgxSliderComponent; ngAfterViewInit(){ let type = this.slider.type; }

    返却 SliderType

  • An @Input property that sets the type of the IgxSliderComponent. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.

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

    パラメーター

    返却 void

upperBound

  • get upperBound(): number
  • set upperBound(value: number): void
  • IgxSliderComponent の上限を返します。

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

    返却 number

  • IgxSliderComponent の上限を設定します。 設定しない場合は、最大値と同じです。

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

    パラメーター

    • value: number

    返却 void

upperLabel

  • get upperLabel(): string | number | false | true
  • 上位ラベルに対応する値を返します。

    @ViewChild("slider")
    public slider: IgxSliderComponent;
    let label = this.slider.upperLabel;

    返却 string | number | false | true

upperValue

  • get upperValue(): number
  • set upperValue(value: number): void
  • IgxSliderComponent の上値を返します。

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

    返却 number

  • IgxSliderComponent の上値を設定します。

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

    パラメーター

    • value: number

    返却 void

value

メソッド

onHoverChange

  • onHoverChange(state: boolean): void

onPanEnd

  • onPanEnd(): void

onPanStart

  • onPanStart(): void