Angular UI Components Documentation

enum SliderButtonsPosition {
     both,
     left,
     right
}

Sets or gets the buttonsPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [buttonsPosition]="'left'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [disabled]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

enum SliderLayout {
     normal,
     reverse
}

Sets or gets the layout property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [layout]="'reverse'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

enum SliderMode {
     default,
     fixed
}

Sets or gets the mode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [mode]="'fixed'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minorTicksFrequency property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [minorTicksFrequency]="2">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minorTickSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [minorTickSize]="4">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [orientation]="'vertical'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rangeSlider property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [rangeSlider]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [rtl]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the step property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showTicks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [showTicks]="false">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showMinorTicks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [showMinorTicks]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showTickLabels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [showTickLabels]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [showButtons]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showRange property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [showRange]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

enum SliderTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [template]="'success'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [theme]="'energyblue'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

enum SliderTicksPosition {
     top,
     bottom,
     both
}

Sets or gets the ticksPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [ticksPosition]="'bottom'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the ticksFrequency property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [ticksFrequency]="1">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the tickSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tickSize]="7">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the tickLabelFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tickLabelFormatFunction]="tickLabelFormatFunction">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the tooltip property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tooltip]="true">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the tooltipHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tooltipHideDelay]="2000">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

enum SliderTooltipPosition {
     near,
     far
}

Sets or gets the tooltipPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tooltipPosition]="'far'">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the tooltipFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [tooltipFormatFunction]="tooltipFormatFunction">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [value]="5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the values property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [values]='[5,15]'>
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5" [width]="300">
        </jqxSlider>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the value of the slider is changed.

Code examples

Bind to the change event of jqxSlider.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider(onChange)="Change($event)"
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the jqxSlider is created.

Code examples

Bind to the created event of jqxSlider.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider(onCreated)="Created($event)"
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    Created(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user is dragging the sliders thumb.

Code examples

Bind to the slide event of jqxSlider.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider(onSlide)="Slide($event)"
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    Slide(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user start dragging slider's thumb.

Code examples

Bind to the slideStart event of jqxSlider.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider(onSlideStart)="SlideStart($event)"
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    SlideStart(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user have dragged the slider's thumb and drop it.

Code examples

Bind to the slideEnd event of jqxSlider.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider(onSlideEnd)="SlideEnd($event)"
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent {
    SlideEnd(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.decrementValue();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.mySlider.getValue();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.incrementValue();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySlider.setValue(10);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSlider #mySlider
            [height]="60" [min]="0" [max]="255" [step]="25.5">
        </jqxSlider>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySlider') mySlider: jqxSliderComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.mySlider.val();
    }

    
}