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">
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">
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">
show/hide primary tick labels
<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>
show/hide secondary tick labels
<igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider>
Show/hide slider ticks
<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>
Sets the duration visibility of thumbs labels. The default value is 750 milliseconds.
<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
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>
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>
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">
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">
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.
}
Returns if the IgxSliderComponent is set as continuous.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let continuous = this.slider.continuous;
}
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">
Returns if the IgxSliderComponent is disabled.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let isDisabled = this.slider.disabled;
}
Disables the component.
<igx-slider #slider [disabled]="true" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
Returns whether the IgxSliderComponent type is RANGE.
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let sliderRange = this.slider.isRange;
}
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.
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;
Returns the lower boundary of settable values of the IgxSliderComponent.
If not set, will return minValue.
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let sliderLowBound = this.slider.lowerBound;
}
Sets the lower boundary of settable values of the IgxSliderComponent.
If not set is the same as min value.
<igx-slider [step]="5" [lowerBound]="20">
Returns the value corresponding the lower label.
@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.lowerLabel;
Returns the lower value of a RANGE IgxSliderComponent.
@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
let sliderLowValue = this.slider.lowerValue;
}
Sets the lower value of a RANGE IgxSliderComponent.
@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
this.slider.lowerValue = value;
}
Returns the maximum displayed track value for the IgxSliderComponent.
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let sliderMax = this.slider.maxValue;
}
Sets the maximal displayed track value for the IgxSliderComponent.
The default maximum value is 100.
<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">
Returns the minimal displayed track value of the IgxSliderComponent.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let sliderMin = this.slider.minValue;
}
Sets the minimal displayed track value for the IgxSliderComponent.
The default minimal value is 0.
<igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">
Returns the number of the presented primary ticks.
const primaryTicks = this.slider.primaryTicks;
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;
Returns the number of the presented secondary ticks.
const secondaryTicks = this.slider.secondaryTicks;
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;
Returns the incremental/decremental dragging step of the IgxSliderComponent.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let step = this.slider.step;
}
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">
Gets the type of the IgxSliderComponent.
The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let type = this.slider.type;
}
Sets the type of the IgxSliderComponent.
The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
sliderType: IgxSliderType = IgxSliderType.RANGE;
<igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
Returns the upper boundary of settable values of the IgxSliderComponent.
If not set, will return maxValue
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
let sliderUpBound = this.slider.upperBound;
}
Sets the upper boundary of the IgxSliderComponent.
If not set is the same as max value.
<igx-slider [step]="5" [upperBound]="20">
Returns the value corresponding the upper label.
@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.upperLabel;
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;
}
Sets the upper value of a RANGE IgxSliderComponent.
@ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
this.slider.upperValue = 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;
}
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">
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: