Class IgxSliderComponent

Ignite UI for Angular Slider - Documentation

The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track can be defined as continuous or stepped, and you can choose between single and range slider types.

Example:

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

Implements

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

Constructors

Properties

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

This event is emitted at the end of every slide interaction.

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

Sets the value of the id attribute. If not provided it will be automatically generated.

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

This event is emitted every time the lower value of a range slider is changed.

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

show/hide primary tick labels

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

show/hide secondary tick labels

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

Show/hide slider ticks

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

Sets the duration visibility of thumbs labels. The default value is 750 milliseconds.

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

Changes tick labels rotation: horizontal - The default rotation toptobottom - Rotates tick labels vertically to 90deg bottomtotop - Rotate tick labels vertically to -90deg

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

Changes ticks orientation: bottom - The default orienation, below the slider track. top - Above the slider track mirror - combines top and bottom orientation.

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

This event is emitted every time the upper value of a range slider is changed.

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

This event is emitted every time the value is changed.

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

Accessors

  • get upperValue(): number
  • Returns the upper value of a RANGE IgxSliderComponent. Returns value of a SLIDER IgxSliderComponent

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

    Returns number

  • set upperValue(value): void
  • Sets the upper value of a RANGE IgxSliderComponent.

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

    Parameters

    • value: number

    Returns void

Methods

  • A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.

    Returns void