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>

Constructors

Section titled "Constructors"

IgxSliderComponent

new IgxSliderComponent(): IgxSliderComponent

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:757

Returns IgxSliderComponent

Properties

Section titled "Properties"

dragFinished

Section titled "dragFinished"

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">
dragFinished: EventEmitter<number | IRangeSliderValue>

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:695

id

Section titled "id"

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">
id: string

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:112

lowerValueChange

Section titled "lowerValueChange"

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">
lowerValueChange: EventEmitter<number>

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:667

primaryTickLabels

Section titled "primaryTickLabels"

show/hide primary tick labels

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:598

secondaryTickLabels

Section titled "secondaryTickLabels"

show/hide secondary tick labels

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:607

showTicks

Section titled "showTicks"

Show/hide slider ticks

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:589

thumbLabelVisibilityDuration

Section titled "thumbLabelVisibilityDuration"

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

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:121

tickLabelsOrientation

Section titled "tickLabelsOrientation"

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>
tickLabelsOrientation: TickLabelsOrientation = TickLabelsOrientation.Horizontal

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:631

ticksOrientation

Section titled "ticksOrientation"

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>
ticksOrientation: TicksOrientation = TicksOrientation.Bottom

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:619

upperValueChange

Section titled "upperValueChange"

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">
upperValueChange: EventEmitter<number>

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:681

valueChange

Section titled "valueChange"

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">
valueChange: EventEmitter<ISliderValueChangeEventArgs>

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:653

continuous

Section titled "continuous" 
continuous: boolean

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:286, projects/igniteui-angular/slider/src/slider/slider.component.ts:299

disabled

Section titled "disabled" 
disabled: boolean

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:257, projects/igniteui-angular/slider/src/slider/slider.component.ts:267

labels

Section titled "labels" 
labels: string | number | boolean[]

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:176, projects/igniteui-angular/slider/src/slider/slider.component.ts:180

lowerBound

Section titled "lowerBound" 
lowerBound: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:411, projects/igniteui-angular/slider/src/slider/slider.component.ts:427

lowerValue

Section titled "lowerValue" 
lowerValue: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:793, projects/igniteui-angular/slider/src/slider/slider.component.ts:812

maxValue

Section titled "maxValue" 
maxValue: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:364, projects/igniteui-angular/slider/src/slider/slider.component.ts:378

minValue

Section titled "minValue" 
minValue: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:316, projects/igniteui-angular/slider/src/slider/slider.component.ts:332

primaryTicks

Section titled "primaryTicks" 
primaryTicks: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:534, projects/igniteui-angular/slider/src/slider/slider.component.ts:548

secondaryTicks

Section titled "secondaryTicks" 
secondaryTicks: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:563, projects/igniteui-angular/slider/src/slider/slider.component.ts:574

step

Section titled "step" 
step: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:220, projects/igniteui-angular/slider/src/slider/slider.component.ts:242

type

Section titled "type" 
type: IgxSliderType

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:142, projects/igniteui-angular/slider/src/slider/slider.component.ts:156

upperBound

Section titled "upperBound" 
upperBound: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:450, projects/igniteui-angular/slider/src/slider/slider.component.ts:466

upperValue

Section titled "upperValue" 
upperValue: number

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:832, projects/igniteui-angular/slider/src/slider/slider.component.ts:851

value

Section titled "value" 
value: number | IRangeSliderValue

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:489, projects/igniteui-angular/slider/src/slider/slider.component.ts:518

Accessors

Section titled "Accessors"

context

Section titled "context"

Returns the template context corresponding to IgxThumbFromTemplateDirective and IgxThumbToTemplateDirective templates.

return {
 $implicit // returns the value of the label,
 labels // returns the labels collection the user has passed.
}
get context(): any

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:205

Returns any

isRange

Section titled "isRange"

Returns whether the IgxSliderComponent type is RANGE.

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:779

Returns boolean

labelsViewEnabled

Section titled "labelsViewEnabled"

Returns if label view is enabled. If the labels is set, the view is automatically activated.

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

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:893

Returns boolean

lowerLabel

Section titled "lowerLabel"

Returns the value corresponding the lower label.

@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.lowerLabel;
get lowerLabel(): string | number | boolean

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:868

Returns string | number | boolean

upperLabel

Section titled "upperLabel"

Returns the value corresponding the upper label.

@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.upperLabel;
get upperLabel(): string | number | boolean

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:880

Returns string | number | boolean

Methods

Section titled "Methods"

ngAfterContentInit

Section titled "ngAfterContentInit"

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.

ngAfterContentInit(): void

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:944

Returns void

setValue

Section titled "setValue" 
setValue(value: number | IRangeSliderValue, triggerChange: boolean): void

Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:1104

Parameters

Returns void