Angular UI Components Documentation

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [disabled]="true">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showGroupLabels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [showGroupLabels]="true">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the labelsOnTicks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [labelsOnTicks]="false">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the markersFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [markersFormatFunction]="markersFormatFunction">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

enum RangeSelectorLabelsFormat {
     d,
     f,
     n,
     c,
     p,
     dd,
     ddd,
     dddd,
     h,
     hh,
     H,
     HH,
     m,
     mm,
     M,
     MM,
     MMM,
     MMMM,
     s,
     ss,
     t,
     tt,
     y,
     yy,
     yyy,
     yyyy
}

Sets or gets the labelsFormat property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [labelsFormat]="'p'">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the labelsFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [labelsFormatFunction]="labelsFormatFunction">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the labelPrecision property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [labelPrecision]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the moveOnClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [moveOnClick]="false">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the markerRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [markerRenderer]="markerRenderer">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the markerPrecision property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [markerPrecision]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the majorLabelRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [majorLabelRenderer]="majorLabelRenderer">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the markersFormat property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [markersFormat]="'p'">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the majorTicksInterval property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minorTicksInterval property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the padding property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [padding]="padding">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

interface RangeSelectorRange {
     from?: String | Number;
     to?: String | Number;
     min?: String | Number;
     max?: String | Number;
}

Sets or gets the range property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the resizable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [resizable]="false">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [rtl]="true">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showMinorTicks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [showMinorTicks]="true">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the snapToTicks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [snapToTicks]="false">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showMajorLabels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [showMajorLabels]="true">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showMarkers property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [showMarkers]="false">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1" [theme]="'energyblue'">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the slected range is changed.

Code examples

Bind to the change event of jqxRangeSelector.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector(onChange)="Change($event)"
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRangeSelector') myRangeSelector: jqxRangeSelectorComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRangeSelector.destroy();
    }

    
}
							
						

interface RangeSelectorGetRange {
     from?: String | Number;
     to?: String | Number;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRangeSelector') myRangeSelector: jqxRangeSelectorComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myRangeSelector.getRange();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRangeSelector') myRangeSelector: jqxRangeSelectorComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRangeSelector.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRangeSelector') myRangeSelector: jqxRangeSelectorComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRangeSelector.refresh();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxRangeSelector #myRangeSelector
            [width]="750" [height]="100" [min]="0" [max]="200" [range]='{ from: 10, to: 50 }' 
            [majorTicksInterval]="10" [minorTicksInterval]="1">
        </jqxRangeSelector>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myRangeSelector') myRangeSelector: jqxRangeSelectorComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myRangeSelector.setRange(20,20);
    }

    
}