| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
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 {
}
|
|
showGroupLabels
|
Boolean
|
false
|
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 {
}
|
|
labelsOnTicks
|
Boolean
|
true
|
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 {
}
|
|
markersFormatFunction
|
Any
|
null
|
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 {
}
|
|
height
|
String | Number
|
100
|
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 {
}
|
|
labelsFormat
|
enum:RangeSelectorLabelsFormat
|
null
|
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 {
}
|
|
labelsFormatFunction
|
Any
|
null
|
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 {
}
|
|
labelPrecision
|
Number
|
0
|
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 {
}
|
|
moveOnClick
|
Boolean
|
true
|
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 {
}
|
|
markerRenderer
|
Any
|
null
|
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 {
}
|
|
markerPrecision
|
Number
|
2
|
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 {
}
|
|
majorLabelRenderer
|
Any
|
null
|
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 {
}
|
|
markersFormat
|
enum:RangeSelectorLabelFsormat
|
null
|
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 {
}
|
|
majorTicksInterval
|
String | Number
|
10
|
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 {
}
|
|
minorTicksInterval
|
Number
|
5
|
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 {
}
|
|
max
|
String | Number
|
100
|
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 {
}
|
|
min
|
String | Number
|
0
|
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 {
}
|
|
padding
|
String | Number
|
"auto"
|
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 {
}
|
|
range
|
RangeSelectorRange
|
{ from: 0, to: Infinity, min: 0, max: Infinity }
|
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 {
}
|
|
resizable
|
Boolean
|
true
|
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 {
}
|
|
rtl
|
Boolean
|
false
|
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 {
}
|
|
showMinorTicks
|
Boolean
|
false
|
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 {
}
|
|
snapToTicks
|
Boolean
|
true
|
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 {
}
|
|
showMajorLabels
|
Boolean
|
false
|
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 {
}
|
|
showMarkers
|
Boolean
|
true
|
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 {
}
|
|
theme
|
String
|
""
|
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 {
}
|
|
width
|
String | Number
|
400
|
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 {
}
|
|
|
|
change
|
Event
|
|
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
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
destroy
|
Void
|
None
|
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();
}
}
|
|
getRange
|
RangeSelectorGetRange
|
None
|
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();
}
}
|
|
render
|
Void
|
None
|
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();
}
}
|
|
refresh
|
Void
|
None
|
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();
}
}
|
|
setRange
|
Void
|
from: Any,
to: Any
|
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);
}
}
|