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:758
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: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
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:668
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:599
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:608
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:590
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:122
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:632
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:620
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:682
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:654
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:206
Returns any
continuous
Section titled "continuous"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
disabled
Section titled "disabled"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
isRange
Section titled "isRange"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
labels
Section titled "labels"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
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:894
Returns boolean
lowerBound
Section titled "lowerBound"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
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:869
Returns string | number | boolean
lowerValue
Section titled "lowerValue"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
maxValue
Section titled "maxValue"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
minValue
Section titled "minValue"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
primaryTicks
Section titled "primaryTicks"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
secondaryTicks
Section titled "secondaryTicks"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
- type:
IgxSliderType
Returns void
upperBound
Section titled "upperBound"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
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:881
Returns string | number | boolean
upperValue
Section titled "upperValue"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
value
Section titled "value"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
- value:
number | IRangeSliderValue
Returns void
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:945
Returns void
setValue
Section titled "setValue"setValue(value: number | IRangeSliderValue, triggerChange: boolean): void Defined in projects/igniteui-angular/slider/src/slider/slider.component.ts:1105
Parameters
- value:
number | IRangeSliderValue - triggerChange:
boolean