ejRangeNavigator

9 Oct 201724 minutes to read

The range navigator can be easily configured to the DOM element, such as div. You can create a range navigator with a highly customizable look and feel.

Name	Type	Description
HTML options	object	settings for range navigator
HTML options	object	settings for range navigator

Example

HTML

<ej-rangenavigator id="rangecontainer">
</ej-rangenavigator>

Requires

• module:jQuery

• module:jquery.globalize.min.js

• module:ej.core.js

• module:ej.data.js

• module:ej.chart.js

• module:ej.rangenavigator.js

Members

allowSnapping boolean

Toggles the placement of slider exactly on the place it left or on the nearest interval.

Default Value

• false

Example

HTML

<ej-rangenavigator id="rangecontainer" [allowSnapping]="true">
</ej-rangenavigator>

border object

Options for customizing the color, opacity and width of the chart border.

border.color string

Border color of rangenavigator. When enable the scrollbar, the default color will be set as “#B4B4B4”.

Default Value

• “transparent”

Example

HTML

<ej-rangenavigator id="rangecontainer" border.color ="green">
</ej-rangenavigator>

border.opacity number

Opacity of the rangeNavigator border.

Default Value

• 1

Example

HTML

<ej-rangenavigator id="rangecontainer" [border.opacity] =0.5>
</ej-rangenavigator>

border.width number

Width of the RangeNavigator border.

Default Value

• 1

Example

HTML

<ej-rangenavigator id="rangecontainer" [border.width] =1>
</ej-rangenavigator>

dataSource object

Specifies the data source for range navigator.

Example

HTML

<ej-rangenavigator id="rangecontainer" [dataSource] ="data1">
</ej-rangenavigator>

series array

Specifies the properties used for customizing the range series.

series.xName string

Name of the property in the datasource that contains x value for the series.

Default Value

• null

Example

TS

this.series = {   
 xName:"XValue"
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

series.yName string

Name of the property in the datasource that contains y value for the series.

Default Value

• null

Example

TS

this.series = {   
 yName:"YValue"
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

series.dataSource object

Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.

Default Value

• null

Example

TS

this.series = {   
 dataSource:"data"
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

series.type enum

Specifies the type of the series to render in chart.

Name	Type	Description
Area	string	Specifies the series type as area.
Line	string	Specifies the series type as line.
Spline	string	Specifies the series type as spline.
StepArea	string	Specifies the series type as steparea.
SplineArea	string	Specifies the series type as steparea.
StepLine	string	Specifies the series type as stepline.

Default Value

• “column”. see Type

Example

TS

this.series = {   
 type:"line"
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

series.enableAnimation boolean

Enable/disable the animation of series.

Default Value

• false

Example

TS

this.series = {   
 enableAnimation:true
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

series.fill string

Fill color of the series.

Default Value

• null

Example

HTML

<ej-chart id="chartcontainer">
     <e-seriescollection>
        <e-series fill ="green"></e-series>
     </e-seriescollection>
</ej-chart>

enableDeferredUpdate boolean

Toggles the redrawing of chart on moving the sliders.

Default Value

• true

Example

HTML

<ej-rangenavigator id="rangecontainer" [enableDeferredUpdate] ="false">
</ej-rangenavigator>

enableScrollbar boolean

Enable the scrollbar option in the rangenavigator.

Default Value

• false

Example

HTML

<ej-rangenavigator id="rangecontainer" [enableRTL] ="true">
</ej-rangenavigator>

enableRTL boolean

Toggles the direction of rendering the range navigator control.

Default Value

• false

Example

HTML

<ej-rangenavigator id="rangecontainer"  [enableRTL] ="false">
</ej-rangenavigator>

isResponsive boolean

Sets a value whether to make the range navigator responsive on resize.

Default Value

• false

Example

HTML

<ej-rangenavigator id="rangecontainer" [isResponsive] ="true">
</ej-rangenavigator>

labelSettings object

Options for customizing the labels colors, font, style, size, horizontalAlignment and opacity.

labelSettings.higherLevel object

Options for customizing the higher level labels in range navigator.

labelSettings.higherLevel.border object

Options for customizing the border of grid lines in higher level.

labelSettings.higherLevel.border.color string

Specifies the border color of grid lines.

Default Value

• “transparent”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       border:{
           color:'#ff0000'
       }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.border.width string

Specifies the border width of grid lines.

Default Value

• “0.5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       border:{
           width:1
       }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.fill string

Specifies the fill color of higher level labels.

Default Value

• “transparent”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       fill:"days"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.gridLineStyle object

Options for customizing the grid line colors, width, dashArray, border.

labelSettings.higherLevel.gridLineStyle.color string

Specifies the color of grid lines in higher level.

Default Value

• “#B5B5B5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       gridLineStyle :{
           color:"#ff0000"
       }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.gridLineStyle.dashArray string

Specifies the dashArray of grid lines in higher level.

Default Value

• “20 5 0”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       gridLineStyle :{
           dashArray:"20 10 5"
       }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.gridLineStyle.width string

Specifies the width of grid lines in higher level.

Default Value

• “#B5B5B5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
       gridLineStyle :{
           width:1
       }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.intervalType enum

Specifies the intervalType for higher level labels. See IntervalType

Name	Type	Description
Years	string	The labels are displayed with year as intervals between them
Quarters	string	The labels are displayed with quarter as intervals between them
Months	string	The labels are displayed with months as intervals between them
Weeks	string	The labels are displayed with weeks as intervals between them
Days	string	The labels are displayed with days as intervals between them
Hours	string	The labels are displayed with hours as intervals between them
Minutes	string	The labels are displayed with minutes as intervals between them

Default Value

• “auto”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
      intervalType:"days"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.labelPlacement enum

Specifies the position of the labels to render either inside or outside of plot area

Name	Type	Description
Inside	string	The Labels are displayed inside the Range Navigator
Outside	string	The Labels are displayed outside the Range Navigator

Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement

Default Value

• “outside”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
     labelPlacement:"inside"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.position enum

Specifies the position of the labels in higher level

Name	Type	Description
Top	string	Labels are placed on top of the slider
Bottom	string	Labels are placed at the bottom of the slider

Specifies the position of the labels in higher level.See Position

Default Value

• “top”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
     position:"bottom"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style object

Options for customizing the style of higher level labels.

labelSettings.higherLevel.style.font object

Options for customizing the font properties.

labelSettings.higherLevel.style.font.color string

Specifies the label font color. Labels render with the specified font color.

Default Value

• “black”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            color:"red"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.font.fontFamily string

Specifies the label font family. Labels render with the specified font family.

Default Value

• “Segoe UI”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            fontFamily:"Algerian"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.font.fontStyle string

Specifies the label font style. Labels render with the specified font style.

Default Value

• “Normal”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            fontStyle:"Italic"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.font.fontWeight string

Specifies the label font weight. Labels render with the specified font weight.

Default Value

• “regular”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            fontWeight:"regular"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.font.opacity number

Specifies the label opacity. Labels render with the specified opacity.

Default Value

• 1

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            opacity:"0.5"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.font.size string

Specifies the label font size. Labels render with the specified font size.

Default Value

• “12px”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        font:{
            size:"14px"
        }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.style.horizontalAlignment string

Specifies the horizontal text alignment of the text in label.

Default Value

• “middle”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        horizontalAlignment: "left"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.higherLevel.visible boolean

Toggles the visibility of higher level labels.

Default Value

• true

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    higherLevel: {
        visible: false
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel object

Options for customizing the labels in lower level.

labelSettings.lowerLevel.border object

Options for customizing the border of grid lines in lower level.

labelSettings.lowerLevel.border.color string

Specifies the border color of grid lines.

Default Value

• “transparent”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      border:{
          color:"#ff0000"
      }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.border.width string

Specifies the border width of grid lines.

Default Value

• “0.5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      border:{
          width:"1"
      }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.fill string

Specifies the fill color of labels in lower level.

Default Value

• “transparent”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      fill:"days"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.gridLineStyle object

Options for customizing the grid lines in lower level.

labelSettings.lowerLevel.gridLineStyle.color string

Specifies the color of grid lines in lower level.

Default Value

• “#B5B5B5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      gridLineStyle :{
          color:"#ff0000"
      }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.gridLineStyle.dashArray string

Specifies the dashArray of gridLines in lowerLevel.

Default Value

• “20 5 0”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      gridLineStyle :{
          dashArray:"20 10 5"
      }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.gridLineStyle.width string

Specifies the width of grid lines in lower level.

Default Value

• “#B5B5B5”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
      gridLineStyle :{
          width:"1"
      }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.intervalType enum

Specifies the intervalType of the labels in lower level.See IntervalType

Default Value

• “auto”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     intervalType:"days"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.labelPlacement enum

Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement

Default Value

• “outside”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     labelPlacement:"inside"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.position enum

Specifies the position of the labels in lower level.See Position

Default Value

• “bottom”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     position:"bottom"
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style object

Options for customizing the style of labels.

labelSettings.lowerLevel.style.font object

Options for customizing the font of labels.

labelSettings.lowerLevel.style.font.color string

Specifies the color of labels. Label text render in this specified color.

Default Value

• “black”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
         color:"red"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.font.fontFamily string

Specifies the font family of labels. Label text render in this specified font family.

Default Value

• “Segoe UI”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
        fontFamily: "Algerian"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.font.fontStyle string

Specifies the font style of labels. Label text render in this specified font style.

Default Value

• “Normal”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
       fontStyle: "Italic"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.font.fontWeight string

Specifies the font weight of labels. Label text render in this specified font weight.

Default Value

• “regular”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
       fontWeight: "regular"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.font.opacity string

Specifies the opacity of labels. Label text render in this specified opacity.

Default Value

• “12px”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
       opacity: "0.5"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.font.size string

Specifies the size of labels. Label text render in this specified size.

Default Value

• “12px”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
       size: "14px"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.style.horizontalAlignment string

Specifies the horizontal text alignment of the text in label.

Default Value

• “middle”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
     font:{
       horizontalAlignment: "left"
     }
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.lowerLevel.visible boolean

Toggles the visibility of labels in lower level.

Default Value

• true

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    lowerLevel: {
       visible:false
    },    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style object

Options for customizing the style of labels in range navigator.

labelSettings.style.font object

Options for customizing the font of labels in range navigator.

labelSettings.style.font.color string

Specifies the label color. This color is applied to the labels in range navigator.

Default Value

• “#FFFFFF”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
            color:"#ff0000"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.font.family string

Specifies the label font family. Labels render with the specified font family.

Default Value

• “Segoe UI”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
            family:"Arial"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.font.opacity ` number`

Specifies the label font opacity. Labels render with the specified font opacity.

Default Value

• 1

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
            opacity:"0.5"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.font.size string

Specifies the label font size. Labels render with the specified font size.

Default Value

• “1px”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
            size:"14px"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.font.style enum

Specifies the label font style. Labels render with the specified font style..

Name	Type	Description
Normal	string	The labels are displayed in the default format
Bold	string	The labels are displayed in Bold format
Italic	string	The labels are displayed in the italic format

Specifies the label font style. Labels render with the specified font style..See FontStyle

Default Value

• “Normal”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
           style:"Normal"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.font.weight enum

Specifies the label font weight

Name	Type	Description
Regular	string	The Labels are displayed in the default manner
Lighter	string	The Labels are displayed lighter than the normal text

Specifies the label font weight. Labels render with the specified font weight. See FontWeight

Default Value

• “regular”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
        font:{
           weight:"Regular"
        }
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

labelSettings.style.horizontalAlignment enum

Specifies the horizontalAlignment of the label in RangeNavigator

Name	Type
Middle	string	The labels are aligned to the center
Left	string	The labels are aligned to the left
Right	string	The labels are aligned to the right

Specifies the horizontalAlignment of the label in range navigator. See HorizontalAlignment

Default Value

• “middle”

Example

TS

this.labelSettings = {
    // customizing higher level labels.
    style:{
       horizontalAlignment:"middle"
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>

locale string

This property is to specify the localization of range navigator.

Default Value

• “en-US”

Example

HTML

<ej-rangenavigator id="rangecontainer" locale="fr-FR">
</ej-rangenavigator>

navigatorStyleSettings object

Options for customizing the range navigator.

navigatorStyleSettings.background string

Specifies the background color of range navigator.

Default Value

• “#dddddd”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    background: "#ff0000",    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.border object

Options for customizing the border color and width of range navigator.

navigatorStyleSettings.border.color string

Specifies the border color of range navigator.

Default Value

• “transparent”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    border:{
        color:#ff0000
    }   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.border.dashArray string

Specifies the dash array of range navigator.

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    border:{
       dashArray:"2,3"
    }   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.border.width ` number`

Specifies the border width of range navigator.

Default Value

• 0.5

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    border:{
      width:1
    }   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.leftThumbTemplate string

Specifies the left side thumb template in range navigator we can give either div id or HTML string

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    leftThumbTemplate:"item"   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.majorGridLineStyle object

Options for customizing the major grid lines.

navigatorStyleSettings.majorGridLineStyle.color string

Specifies the color of major grid lines in range navigator.

Default Value

• “#B5B5B5”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    majorGridLineStyle:{
        color:"#ff0000"
    } 
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.majorGridLineStyle.visible boolean

Toggles the visibility of major grid lines.

Default Value

• true

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    majorGridLineStyle:{
        visible:false
    } 
};

HTML

<ej-rangenavigator id="rangecontainer"  [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.minorGridLineStyle object

Options for customizing the minor grid lines.

navigatorStyleSettings.minorGridLineStyle.color string

Specifies the color of minor grid lines in range navigator.

Default Value

• “#B5B5B5”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    minorGridLineStyle:{
        color:"#ff0000"
    } 
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.minorGridLineStyle.visible boolean

Toggles the visibility of minor grid lines.

Default Value

• true

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    minorGridLineStyle:{
        visible:true
    } 
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.opacity ` number`

Specifies the opacity of RangeNavigator.

Default Value

• 1

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    opacity:0.5
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.rightThumbTemplate string

Specifies the right side thumb template in range navigator we can give either div id or HTML string

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    rightThumbTemplate:"item"
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectedRegionColor string

Specifies the color of the selected region in range navigator.

Default Value

• “#EFEFEF”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
   selectedRegionColor:"#ff0000"
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectedRegionOpacity number

Specifies the opacity of Selected Region.

Default Value

• 0

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
   selectedRegionOpacity:0.5
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.thumbColor string

Specifies the color of the thumb in range navigator.

Default Value

• “#2382C3”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
   
   thumbColor:"#ff0000"
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.thumbRadius number

Specifies the radius of the thumb in range navigator.

Default Value

• 10

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {   
   thumbRadius:15   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.thumbStroke string

Specifies the stroke color of the thumb in range navigator.

Default Value

• “#303030”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {   
  thumbStroke:"#ff0000" 
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.unselectedRegionColor string

Specifies the color of the unselected region in range navigator.

Default Value

• “#5EABDE”

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {   
   unselectedRegionColor:"#ff0000"
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.unselectedRegionOpacity number

Specifies the opacity of Unselected Region.

Default Value

• 0.3

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {   
  unselectedRegionOpacity:0.5
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.highlightSettings object

Contains the options for highlighting the range navigator on mouse over.

navigatorStyleSettings.highlightSettings.enable boolean

Enable the highlight settings in range navigator.

Default Value

• false

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    highlightSettings:{
      enable: true
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.highlightSettings.color string

To set the color to the highlight.

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    highlightSettings:{
       color:"red" 
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.highlightSettings.opacity number

To set the opacity to the highlight.

Default Value

• 0.5

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    highlightSettings:{
      opacity:0.5
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.highlightSettings.border object

Contains the border properties for highlighting rectangle.

navigatorStyleSettings.highlightSettings.border.color string

To set the border color to the highlight.

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    highlightSettings:{
       border:{
          color:"yellow"
       }   
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.highlightSettings.border.width number

To set the border width to the highlight.

Default Value

• 1

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
    highlightSettings:{
       border:{
          width:1
       }   
    }    
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectionSettings object

Contains the options for selection the range navigator on mouse over.

navigatorStyleSettings.selectionSettings.enable boolean

Enable the selection settings in range navigator.

Default Value

• false

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
  selectionSettings:{
   enable:false
  }
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectionSettings.color string

To set the color to the selection.

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
  selectionSettings:{
   color:"green"
  }
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectionSettings.opacity number

To set the opacity to the selection.

Default Value

• 0.5

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
  selectionSettings:{
    opacity:0.5
  }
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectionSettings.border object

Contains the border properties for selecting the rectangle.

navigatorStyleSettings.selectionSettings.border.color string

To set the border color to the selection.

Default Value

• null

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
  selectionSettings:{
    border:{
       color:"red"
    }
  }
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

navigatorStyleSettings.selectionSettings.border.width number

To set the border width to the selection.

Default Value

• 1

Example

TS

//  To customize the navigator element     
this.navigatorStyleSettings = {
  selectionSettings:{
    border:{
       width:1
    }
  }
   
};

HTML

<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>

padding string

Padding specifies the gap between the container and the range navigator.

Default Value

• “0”

Example

HTML

<ej-rangenavigator id="rangecontainer" [padding]=15>
</ej-rangenavigator>

rangePadding enum

If the range is not given explicitly, range will be calculated automatically.

Name	Type	Description
Additional	string	The range is added with an extra interval when the RangePadding is set as Additional
Normal	string	The automatic range calculation differs based on the data when the RangePadding is set as Normal
None	string	The Range is calculated based on the minimum and maximum value in the data when the RangePadding is set as None
Round	string	The Range is rounded to the nearest possible values when the RangePadding is set as Round

If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding. See RangePadding

Default Value

• “none”

Example

HTML

<ej-rangenavigator id="rangecontainer"  rangePadding = "normal">
</ej-rangenavigator>

rangeSettings object

Options for customizing the starting and ending ranges.

rangeSettings.end string

Specifies the ending range of range navigator.

Default Value

• null

Example

TS

this.rangeSettings = {   
  end:"01/05/1993"
};

HTML

<ej-rangenavigator id="rangecontainer" [rangeSettings]="rangeSettings">
</ej-rangenavigator>

rangeSettings.start string

Specifies the starting range of range navigator.

Default Value

• null

Example

TS

this.rangeSettings = {   
  start:"01/05/1993"
};

HTML

<ej-rangenavigator id="rangecontainer" [rangeSettings]="rangeSettings">
</ej-rangenavigator>

selectedData object

selectedData is for getting the data when the “rangeChanged” event trigger from client side.

selectedRangeSettings object

Options for customizing the start and end range values.

selectedRangeSettings.end string

Specifies the ending range of range navigator.

Default Value

• null

Example

TS

this.selectedRangeSettings = {   
 end:"01/05/1993"
};

HTML

<ej-rangenavigator id="rangecontainer" [selectedRangeSettings]="selectedRangeSettings">
</ej-rangenavigator>

selectedRangeSettings.start string

Specifies the starting range of range navigator.

Default Value

• null

Example

TS

this.series = {   
 fill:"red"
};

HTML

<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>

scrollRangeSettings object

Options for rendering scrollbar based on the start and end range values.

scrollRangeSettings.end string

Specifies the ending range of range navigator scrollbar and that should be greater than the rangenavigator datasource end value.

Default Value

• null

Example

TS

this.scrollRangeSettings = {   
  end:"01/05/1993"
};

HTML

<ej-rangenavigator id="rangecontainer" [scrollRangeSettings]="scrollRangeSettings">
</ej-rangenavigator>

scrollRangeSettings.start string

Specifies the starting range of range navigator scrollbar and that should be less than the rangenavigator datasource start value.

Default Value

• null

Example

TS

this.scrollRangeSettings = {   
 start:"01/05/1992"
};

HTML

<ej-rangenavigator id="rangecontainer" [scrollRangeSettings]="scrollRangeSettings">
</ej-rangenavigator>

sizeSettings object

Contains property to customize the hight and width of range navigator.

sizeSettings.height string

Specifies height of the range navigator.

Default Value

• null

Example

TS

this.sizeSettings = {   
 height:130
};

HTML

<ej-rangenavigator id="rangecontainer" [sizeSettings]="sizeSettings">
</ej-rangenavigator>

sizeSettings.width string

Specifies width of the range navigator.

Default Value

• null

Example

TS

this.sizeSettings = {   
 width:900
};

HTML

<ej-rangenavigator id="rangecontainer" [sizeSettings]="sizeSettings">
</ej-rangenavigator>

theme string

By specifying this property the user can change the theme of the range navigator.

Default Value

• null

Example

HTML

<ej-rangenavigator id="rangecontainer" theme="azuredark">
</ej-rangenavigator>

tooltipSettings object

Options for customizing the tooltip in range navigator.

Example

tooltipSettings.backgroundColor string

Specifies the background color of tooltip.

Default Value

• “#303030”

Example

TS

this.tooltipSettings = {   
 backgroundColor: "#303030"
};

HTML

<ej-rangenavigator id="rangecontainer"  [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font object

Options for customizing the font in tooltip.

tooltipSettings.font.color string

Specifies the color of text in tooltip. Tooltip text render in the specified color.

Default Value

• “#FFFFFF”

Example

TS

this.tooltipSettings = {   
    font:{
        color : "FFFFFF"       
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font.family string

Specifies the font family of text in tooltip. Tooltip text render in the specified font family.

Default Value

• “Segoe UI”

Example

TS

this.tooltipSettings = {   
    font:{
        family:"Arial"      
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font.fontStyle string

Specifies the font style of text in tooltip. Tooltip text render in the specified font style.

Default Value

• ej.datavisualization.RangeNavigator.fontStyle.Normal

Example

TS

this.tooltipSettings = {   
    font:{
        fontStyle:"Normal"   
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font.opacity ` number`

Specifies the opacity of text in tooltip. Tooltip text render in the specified opacity.

Default Value

• 1

Example

TS

this.tooltipSettings = {   
    font:{
        opacity:0.5  
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font.size string

Specifies the size of text in tooltip. Tooltip text render in the specified size.

Default Value

• “10px”

Example

TS

this.tooltipSettings = {   
    font:{
        size:"15px"  
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer"  [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.font.weight string

Specifies the weight of text in tooltip. Tooltip text render in the specified weight.

Default Value

• ej.datavisualization.RangeNavigator.weight.Regular

Example

TS

this.tooltipSettings = {   
    font:{
        fontWeight:"regular"
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.labelFormat string

Specifies the format of text to be displayed in tooltip.

Default Value

• “MM/dd/yyyy”

Example

TS

this.tooltipSettings = {   
        labelFormat: "MM/dd/yyyy"
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.tooltipDisplayMode string

Specifies the mode of displaying the tooltip. Neither to display the tooltip always nor on demand.

Default Value

• null

Example

TS

this.tooltipSettings = {   
    tooltipDisplayMode: "always"
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

tooltipSettings.visible boolean

Toggles the visibility of tooltip.

Default Value

• true

Example

TS

this.tooltipSettings = {   
    visible: true
 
};

HTML

<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>

valueAxisSettings object

Options for configuring minor grid lines, major grid lines, axis line of axis.

valueAxisSettings.axisLine object

Options for customizing the axis line.

valueAxisSettings.axisLine.visible string

Toggles the visibility of axis line.

Default Value

• “none”

Example

TS

this.valueAxisSettings = {   
    axisLine: {
        visible:true
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.font object

Options for customizing the font of the axis.

valueAxisSettings.font.size string

Text in axis render with the specified size.

Default Value

• “0px”

Example

TS

this.valueAxisSettings = {   
    font: {
      size: '12px'
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.majorGridLines object

Options for customizing the major grid lines.

valueAxisSettings.majorGridLines.visible boolean

Toggles the visibility of major grid lines.

Default Value

• false

Example

TS

this.valueAxisSettings = {   
    majorGridLines: {
        visible: true
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.majorTickLines object

Options for customizing the major tick lines in axis.

valueAxisSettings.majorTickLines.size number

Specifies the size of the majorTickLines in range navigator

Default Value

• 0

Example

TS

this.valueAxisSettings = {   
    majorTickLines: {
        size: "15px"
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer"  [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.majorTickLines.visible boolean

Toggles the visibility of major tick lines.

Default Value

• true

Example

TS

this.valueAxisSettings = {   
    majorTickLines: {
        size: "15px"
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.majorTickLines.width number

Specifies width of the major tick lines.

Default Value

• 0

Example

TS

this.valueAxisSettings = {   
    majorTickLines: {
        width: 1
    }
 
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.rangePadding string

If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding.

Default Value

• “none”

Example

TS

this.valueAxisSettings = {   
    rangePadding: "normal"
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueAxisSettings.visible boolean

Toggles the visibility of axis in range navigator.

Default Value

• false

Example

TS

this.valueAxisSettings = {   
    visible: false
};

HTML

<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>

valueType enum

You can plot data of type date time or numeric. This property determines the type of data that this axis will handle.

Name	Type	Description
Numeric	string	The numeric data is used in the RangeNavigator then the ValueType is set as Numeric
DateTime	string	The default value type of Range Navigator is DateTime and it represents the DateTime Values

Default Value

• “datetime”

Example

HTML

<ej-rangenavigator id="rangecontainer" valueType ="numeric">
</ej-rangenavigator>

xName object

Specifies the xName for dataSource. This is used to take the x values from dataSource

Example

HTML

<ej-rangenavigator id="rangecontainer" xName ="X">
</ej-rangenavigator>

yName object

Specifies the yName for dataSource. This is used to take the y values from dataSource

Example

HTML

<ej-rangenavigator id="rangecontainer" yName ="Y">
</ej-rangenavigator>

zoomSettings.zoomFactor string

This property determines the factor by which the axis is scaled. Value must be specified between 0 and 1.

Default Value

• “1”

Example

TS

this.zoomSettings = {   
    zoomFactor: 1
};

HTML

<ej-rangenavigator id="rangecontainer" [zoomSettings]="zoomSettings">
</ej-rangenavigator>

zoomSettings.zoomPosition string

This property determines the starting position of the zoomed axis. Value must be specified between 0 and 1.

Default Value

• “0”

Example

TS

this.zoomSettings = {   
    zoomFactor: 0
};

HTML

<ej-rangenavigator id="rangecontainer" [zoomSettings]="zoomSettings">
</ej-rangenavigator>

Methods

_destroy ()

destroy the range navigator widget

Returns: void

Example

TS

destroy(){
     
     //Do something
     this.range.widget.destroy();

}

Events

load

Fires on load of range navigator.

Name	Type	Description
HTML Data	Object	parameters from range navigator
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the range navigator model
HTML type	string	returns the name of the event

Example

TS

load(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (load)="load($event)">
</ej-rangenavigator>

loaded

Fires after range navigator is loaded.

Name	Type	Description
HTML Data	Object	parameters from range navigator
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the range navigator model
HTML type	string	returns the name of the event

Example

TS

onloaded(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (loaded)="onloaded($event)">
</ej-rangenavigator>

rangeChanged

Fires on changing the range of range navigator.

Name	Type	Description
HTML Data	Object	parameters from range navigator
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the range navigator model
HTML type	string	returns the name of the event

Example

TS

onrangechanged(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (rangeChanged)="onrangechanged($event)">
</ej-rangenavigator>

scrollChanged

Fires on changing the scrollbar position of range navigator.

Name	Type	Description
HTML data	Object	parameters from RangeNavigator
HTML dataoldRange	object	returns the scrollbar position old start and end range value on changing scrollbar
HTML datanewRange	Object	returns the scrollbar position new start and end range value on changing scrollbar
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the RangeNavigator model
HTML type	string	returns the name of the event

Example

TS

onscrollchanged(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (scrollChanged)="onscrollchanged($event)">
</ej-rangenavigator>

scrollStart

Fires on when starting to change the scrollbar position of range navigator.

Name	Type	Description
HTML data	Object	parameters from RangeNavigator
HTML datastartRange	string	returns the scrollbar position starting range value on changing scrollbar
HTML dataendRange	string	returns the scrollbar position end range value on changing scrollbar
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the RangeNavigator model
HTML type	string	returns the name of the event

Example

TS

onscrollstart(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (scrollStart)="onscrollstart($event)">
</ej-rangenavigator>

selectedRangeStart

Fires on when starting to change the slider position of range navigator.

Name	Type	Description
HTML data	Object	parameters from RangeNavigator
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the RangeNavigator model
HTML type	string	returns the name of the event

Example

TS

onselectedrangestart(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (selectedRangeStart)="onselectedrangestart($event)">
</ej-rangenavigator>

selectedRangeEnd

Fires when the selection ends in the range navigator

Name	Type	Description
HTML data	object	parameters from RangeNavigator
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the RangeNavigator model
HTML type	string	returns the name of the event

Example

TS

onselectedrangeend(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (selectedRangeEnd)="onselectedrangeend($event)">
</ej-rangenavigator>

scrollEnd

Fires on changes ending the scrollbar position of range navigator.

Name	Type	Description
HTML data	Object	parameters from RangeNavigator
HTML dataoldRange	object	returns the scrollbar position old start and end range value on change end of scrollbar
HTML datanewRange	Object	returns the scrollbar position new start and end range value on change end of scrollbar
HTML cancel	boolean	if the event should be canceled; otherwise, false.
HTML model	object	returns the RangeNavigator model
HTML type	string	returns the name of the event

Example

TS

onscrollend(sender){
     
     //Do something

}

HTML

<ej-rangenavigator id="events" (scrollEnd)="onscrollend($event)">
</ej-rangenavigator>