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>

IgxSliderComponent

new IgxSliderComponent(): IgxSliderComponent

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

Returns IgxSliderComponent

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:696

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:113

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:668

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:599

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:608

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:590

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:122

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:632

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:620

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:682

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:654

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:206

Returns any

Returns if the IgxSliderComponent is set as continuous.

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

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

Returns boolean

Sets the IgxSliderComponent as continuous. By default is considered that the IgxSliderComponent is discrete. Discrete IgxSliderComponent slider has step indicators over the track and visible thumb labels during interaction. Continuous IgxSliderComponent does not have ticks and does not show bubble labels for values.

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

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

Parameters

  • continuous: boolean

Returns void

Returns if the IgxSliderComponent is disabled.

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

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

Returns boolean

Disables the component.

<igx-slider #slider [disabled]="true" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
set disabled(disable: boolean): void

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

Parameters

  • disable: boolean

Returns void

Returns whether the slider 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:780

Returns boolean

Enables labelView, by accepting a collection of primitive values with more than one element. Each element will be equally spread over the slider and it will serve as a thumb label. Once the property is set, it will precendence over maxValue, minValue, step. This means that the manipulation for those properties won't be allowed.

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

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

Returns string | number | boolean[]

set labels(labels: string | number | boolean[]): void

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

Parameters

  • labels: string | number | boolean[]

Returns void

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:894

Returns boolean

Returns the lower boundary of settable values of the slider. If not set, will return minValue.

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

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

Returns number

Sets the lower boundary of settable values of the slider. If not set is the same as min value.

<igx-slider [step]="5" [lowerBound]="20">
set lowerBound(value: number): void

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

Parameters

  • value: number

Returns void

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:869

Returns string | number | boolean

Returns the lower value of a RANGE slider.

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

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

Returns number

Sets the lower value of a RANGE slider.

@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
   this.slider.lowerValue = value;
}
set lowerValue(value: number): void

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

Parameters

  • value: number

Returns void

Returns the maximum displayed track value for the IgxSliderComponent.

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

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

Returns number

Sets the maximal displayed track value for the slider. The default maximum value is 100.

<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">
set maxValue(value: number): void

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

Parameters

  • value: number

Returns void

Returns the minimal displayed track value of the slider.

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

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

Returns number

Sets the minimal displayed track value for the slider. The default minimal value is 0.

<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">
set minValue(value: number): void

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

Parameters

  • value: number

Returns void

Returns the number of the presented primary ticks.

const primaryTicks = this.slider.primaryTicks;
get primaryTicks(): number

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

Returns number

Sets the number of primary ticks. If @labels is enabled, this property won't function. Insted enable ticks by showTicks property.

this.slider.primaryTicks = 5;
set primaryTicks(val: number): void

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

Parameters

  • val: number

Returns void

Returns the number of the presented secondary ticks.

const secondaryTicks = this.slider.secondaryTicks;
get secondaryTicks(): number

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

Returns number

Sets the number of secondary ticks. The property functions even when labels is enabled, but all secondary ticks won't present any tick labels.

this.slider.secondaryTicks = 5;
set secondaryTicks(val: number): void

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

Parameters

  • val: number

Returns void

Returns the incremental/decremental dragging step of the IgxSliderComponent.

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

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

Returns number

Sets the incremental/decremental step of the value when dragging the thumb. The default step is 1, and step should not be less or equal than 0.

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

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

Parameters

  • step: number

Returns void

Gets the type of the slider. The slider type can be SLIDER (default) or RANGE.

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

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

Returns IgxSliderType

Sets the type of the slider. The slider type can be SLIDER (default) or RANGE.

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

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

Parameters

Returns void

Returns the upper boundary of settable values of the slider. If not set, will return maxValue

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

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

Returns number

Sets the upper boundary of the slider. If not set is the same as max value.

<igx-slider [step]="5" [upperBound]="20">
set upperBound(value: number): void

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

Parameters

  • value: number

Returns void

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:881

Returns string | number | boolean

Returns the upper value of a RANGE slider. Returns value of a SLIDER slider

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

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

Returns number

Sets the upper value of a RANGE slider.

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

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

Parameters

  • value: number

Returns void

Returns the slider value. If the slider is of type IgxSliderType.SLIDER the returned value is number. If the slider type is IgxSliderType.RANGE. The returned value represents an object of lowerValue and upperValue.

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

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

Returns number | IRangeSliderValue

Sets the slider value. If the slider is of type IgxSliderType.SLIDER. The argument is number. By default the value gets the lowerBound. If the slider type is IgxSliderType.RANGE the argument represents an object of lowerValue and upperValue properties. By default the object is associated with the lowerBound and upperBound property values.

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

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

Parameters

Returns void

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:945

Returns void

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

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

Parameters

Returns void