クラス 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
  • AfterContentInit
  • OnChanges
  • OnDestroy

コンストラクタ

constructor

  • new IgxSliderComponent(renderer: Renderer2, _el: ElementRef, _cdr: ChangeDetectorRef, _ngZone: NgZone, _dir: IgxDirectionality): 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">

onValueChanged

onValueChanged: EventEmitter<number | IRangeSliderValue> = new EventEmitter<number | IRangeSliderValue>()

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

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

primaryTickLabels

primaryTickLabels: boolean = true

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

<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>

secondaryTickLabels

secondaryTickLabels: boolean = true

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

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

showTicks

showTicks: boolean = false

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

<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>

thumbLabelVisibilityDuration

thumbLabelVisibilityDuration: number = 750

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

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

tickLabelsOrientation

tickLabelsOrientation: TickLabelsOrientation = TickLabelsOrientation.Horizontal

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

<igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider>

ticksOrientation

ticksOrientation: TicksOrientation = TicksOrientation.Bottom

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

<igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider>

アクセサー

context

  • get context(): any

continuous

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

disabled

  • get disabled(): boolean
  • set disabled(disable: boolean): void

isRange

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

lowerBound

  • get lowerBound(): number
  • set lowerBound(value: number): void

lowerLabel

  • get lowerLabel(): string | number | false | true

lowerValue

  • get lowerValue(): number
  • set lowerValue(value: number): void

maxValue

  • get maxValue(): number
  • set maxValue(value: number): void

minValue

  • get minValue(): number
  • set minValue(value: number): void

primaryTicks

  • get primaryTicks(): number
  • set primaryTicks(val: number): void

secondaryTicks

  • get secondaryTicks(): number
  • set secondaryTicks(val: number): void

step

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

type

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

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

    返却 IgxSliderType

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

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

    パラメーター

    返却 void

upperBound

  • get upperBound(): number
  • set upperBound(value: number): void

upperLabel

  • get upperLabel(): string | number | false | true

upperValue

  • get upperValue(): number
  • set upperValue(value: number): void

value

メソッド

ngAfterContentInit

  • ngAfterContentInit(): void

setValue