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"
           [isContinuous]=true [(ngModel)]="volume">
</igx-slider>

Hierarchy

  • IgxSliderComponent

Implements

  • ControlValueAccessor
  • EditorProvider
  • OnInit
  • AfterViewInit

Constructors

constructor

Properties

disabled

disabled: boolean

An @Input property that disables or enables UI interaction.

<igx-slider #slider [disabled]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">

id

id: string = `igx-slider-${NEXT_ID++}`

An @Input property that 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">

isContinuous

isContinuous: boolean = false

An @Input property that marks the IgxSliderComponent as continuous. By default is considered that the IgxSliderComponent is discrete. Discrete IgxSliderComponent does not have ticks and does not shows bubble labels for values.

<igx-slider #slider [isContinuous]="'true'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">

onValueChange

onValueChange: EventEmitter<ISliderValueChangeEventArgs> = new EventEmitter<ISliderValueChangeEventArgs>()

This event is emitted when user has stopped interacting the thumb and value is changed.

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

step

step: number = 1

An @Input property that 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">

thumbLabelVisibilityDuration

thumbLabelVisibilityDuration: number = 750

An @Input property that sets the duration visibility of thumbs labels. The default value is 750 milliseconds.

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

type

type: SliderType = SliderType.SLIDER

An @Input property that sets the type of the IgxSliderComponent. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.

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

Accessors

isRange

  • get isRange(): boolean
  • Returns whether the IgxSliderComponent type is RANGE.

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

    Returns boolean

lowerBound

  • get lowerBound(): number
  • set lowerBound(value: number): void
  • Returns the lower boundary of the IgxSliderComponent.

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

    Returns number

  • Sets the lower boundary of the IgxSliderComponent. If not set is the same as min value.

    <igx-slider [step]="5" [lowerBound]="20">

    Parameters

    • value: number

    Returns void

lowerValue

  • get lowerValue(): number
  • set lowerValue(value: number): void
  • Returns the lower value of the IgxSliderComponent.

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

    Returns number

  • Sets the lower value of the IgxSliderComponent.

    @ViewChild("slider2")
    public slider: IgxSliderComponent;
    public lowValue(event){
       this.slider.lowerValue = 120;
    }

    Parameters

    • value: number

    Returns void

maxValue

  • get maxValue(): number
  • set maxValue(value: number): void
  • Returns the maximum value for the IgxSliderComponent.

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

    Returns number

  • Sets the maximal value for the IgxSliderComponent. The default maximum value is 100.

    <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="256">

    Parameters

    • value: number

    Returns void

minValue

  • get minValue(): number
  • set minValue(value: number): void
  • Returns the minimal value of the IgxSliderComponent.

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

    Returns number

  • Sets the minimal value for the IgxSliderComponent. The default minimal value is 0.

    <igx-slider [type]="sliderType" [minValue]="56" [maxValue]="100">

    Parameters

    • value: number

    Returns void

upperBound

  • get upperBound(): number
  • set upperBound(value: number): void
  • Returns the upper boundary of the IgxSliderComponent.

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

    Returns number

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

    <igx-slider [step]="5" [upperBound]="20">

    Parameters

    • value: number

    Returns void

upperValue

  • get upperValue(): number
  • set upperValue(value: number): void
  • Returns the upper value of the IgxSliderComponent.

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

    Returns number

  • Sets the upper value of the IgxSliderComponent.

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

    Parameters

    • value: number

    Returns void

value

  • Returns the slider value. If the slider is of type SLIDER the returned value is number. If the slider type is RANGE the returned value is object containing lower and upper properties for the values.

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

    Returns number | IRangeSliderValue

  • Sets the slider value. If the slider is of type SLIDER the argument is number. By default if no value is set the default value is same as lower upper bound. If the slider type is RANGE the the argument is object containing lower and upper properties for the values. By default if no value is set the default value is for lower value it is the same as lower bound and if no value is set for the upper value it is the same as the upper bound.

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

    Parameters

    Returns void