ejRangeNavigator

30 Aug 201824 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.

$(element).ejRangeNavigator(options, options)

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

Example

HTML

<div id="container"></div> 
 
<script>
// Create RangeNavigator
$('#container').ejRangeNavigator();       
</script>

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

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   allowSnapping: true;
   });
</script>

allowNextValue boolean

It allows to show the value between the particular periods (i.e) from 1st January to 31st February and so on. The default value is true. If we set the property as false, it allows to show the value between the particular periods.(i.e) from 1st January to 31st January and so on.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   allowNextValue: false;
   });
</script>

border object

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

Try it: JS Playground Sample

border.color string

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

Default Value

• “transparent”

Example

JS

$("#container").ejRangeNavigator({

   border: { color: "green" }                      

});

border.opacity number

Opacity of the rangeNavigator border.

Default Value

• 1

Example

JS

$("#container").ejRangeNavigator({

   border: { opacity: 0.5 }                      

});

border.width number

Width of the RangeNavigator border.

Default Value

• 1

Example

JS

$("#container").ejRangeNavigator({

   border: { width: 2 }                      

});

dataSource object

Specifies the data source for range navigator.

Example

HTML

$("#container").ejRangeNavigator({
   dataSource:"data1", 
    xName: "X", 
    yName: "Y"
   });

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

JS

$("#container").ejRangeNavigator({
series : [{xName: "XValue" }]                   
});

series.yName string

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

Default Value

• null

Example

JS

$("#container").ejRangeNavigator({
series : [{xName: "YValue" }]                   
});

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

JS

$("#container").ejRangeNavigator({
series : [{dataSource: data }]                   
});

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

JS

$("#container").ejRangeNavigator({
series : [{type : "line" }]                   
});

series.enableAnimation boolean

Enable/disable the animation of series.

Default Value

• false

Example

JS

$("#container").ejRangeNavigator({
series : [{enableAnimation : true }]                   
});

series.fill string

Fill color of the series.

Default Value

• null

Example

JS

$("#container").ejRangeNavigator({
series :[{fill : "green"}]                 
});

seriesSettings array

Specifies the properties used for customizing all the range series.

seriesSettings.xName string

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

Default Value

• null

Example

JS

$("#container").ejRangeNavigator({
seriesSettings : [{xName: "XValue" }]                   
});

seriesSettings.yName string

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

Default Value

• null

Example

JS

$("#container").ejRangeNavigator({
seriesSettings : [{xName: "YValue" }]                   
});

seriesSettings.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

JS

$("#container").ejRangeNavigator({
seriesSettings : [{dataSource: data }]                   
});

seriesSettings.type enum

Specifies the type of the series to render in chart.

Default Value

• “column”. see Type

Example

JS

$("#container").ejRangeNavigator({
seriesSettings : [{type : "line" }]                   
});

seriesSettings.enableAnimation boolean

Enable/disable the animation of series.

Default Value

• false

Example

JS

$("#container").ejRangeNavigator({
seriesSettings : [{enableAnimation : true }]                   
});

seriesSettings.fill string

Fill color of the series.

Default Value

• null

Example

JS

$("#container").ejRangeNavigator({
seriesSettings :[{fill : "green"}]                 
});

enableDeferredUpdate boolean

Toggles the redrawing of chart on moving the sliders.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   enableDeferredUpdate:false,
   });
</script>

enableScrollbar boolean

Enable the scrollbar option in the rangenavigator.

Default Value

• false

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   enableScrollbar: true,
   });
</script>

enableAutoResizing boolean

Enable the resize option in the rangenavigator.

Default Value

• false

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
      enableAutoResizing: true,
   });
</script>

enableRTL boolean

Toggles the direction of rendering the range navigator control.

Default Value

• false

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  enableRTL: true,
   });
</script>

isResponsive boolean

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

Default Value

• false

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   isResponsive: true;
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  labelSettings:{higherLevel:{ border :{color:"#ff0000"}}},
   });
</script>

labelSettings.higherLevel.border.width string

Specifies the border width of grid lines.

Default Value

• “0.5”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ border :{width:1}}},
   });
</script>

labelSettings.higherLevel.fill string

Specifies the fill color of higher level labels.

Default Value

• “transparent”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ fill:"days"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ gridLineStyle :{color:"#ff0000"}}},
   });

labelSettings.higherLevel.gridLineStyle.dashArray string

Specifies the dashArray of grid lines in higher level.

Default Value

• “20 5 0”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ gridLineStyle :{dashArray:"20 10 5"}}},
   });
</script>

labelSettings.higherLevel.gridLineStyle.width string

Specifies the width of grid lines in higher level.

Default Value

• “#B5B5B5”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ gridLineStyle :{width:1}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ intervalType:"days"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ labelPlacement:"inside"}},
   });
</script>

labelSettings.higherLevel.labelIntersectAction enum

Specifies to hide the labels when it intersects with each other.

Name	Type	Description
None	string	The Labels are displayed as normal in the Range Navigator
Hide	string	The Labels are hidden when it intersects.

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

Default Value

• “none”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ labelIntersectAction:"hide"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ position:"bottom"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{color: "red"}}}},
   });
</script>

labelSettings.higherLevel.style.font.fontFamily string

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

Default Value

• “Segoe UI”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{fontFamily: "Algerian"}}}},
   });
</script>

labelSettings.higherLevel.style.font.fontStyle string

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

Default Value

• “Normal”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{fontStyle: "Italic"}}}},
   });
</script>

labelSettings.higherLevel.style.font.fontWeight string

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

Default Value

• “regular”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{fontWeight: "regular"}}}},
   });
</script>

labelSettings.higherLevel.style.font.opacity number

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

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{opacity: "14px"}}}},
   });
</script>

labelSettings.higherLevel.style.font.size string

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

Default Value

• “12px”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{font:{size: "14px"}}}},
   });
</script>

labelSettings.higherLevel.style.horizontalAlignment string

Specifies the horizontal text alignment of the text in label.

Default Value

• “middle”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ style:{horizontalAlignment: "left"}}},
   });
</script>

labelSettings.higherLevel.visible boolean

Toggles the visibility of higher level labels.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{higherLevel:{ visible:false}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ border :{color:"#ff0000"}}},
   });
</script>

labelSettings.lowerLevel.border.width string

Specifies the border width of grid lines.

Default Value

• “0.5”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ border :{width:1}}},
   });
</script>

labelSettings.lowerLevel.fill string

Specifies the fill color of labels in lower level.

Default Value

• “transparent”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  labelSettings:{lowerLevel:{ fill:"days"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ gridLineStyle :{color:"#ff0000"}}},
   });
</script>

labelSettings.lowerLevel.gridLineStyle.dashArray string

Specifies the dashArray of gridLines in lowerLevel.

Default Value

• “20 5 0”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   lowerLevel:{ gridLineStyle :{dashArray:"20 10 5"}}},
   });
</script>

labelSettings.lowerLevel.gridLineStyle.width string

Specifies the width of grid lines in lower level.

Default Value

• “#B5B5B5”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ gridLineStyle :{width:1}}},
   });
</script>

labelSettings.lowerLevel.intervalType enum

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

Default Value

• “auto”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ intervalType:"days"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ labelPlacement:"inside"}},
   });
</script>

labelSettings.lowerLevel.labelIntersectAction enum

Specifies to hide the labels when it intersects with each other.

Name	Type	Description
None	string	The Labels are displayed as normal in the Range Navigator
Hide	string	The Labels are hidden when it intersects.

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

Default Value

• “none”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ labelIntersectAction:"hide"}},
   });
</script>

labelSettings.lowerLevel.position enum

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

Default Value

• “bottom”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ position:"bottom"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{color: "red"}}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{fontFamily: "Algerian"}}}},
   });
</script>

labelSettings.lowerLevel.style.font.fontStyle string

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

Default Value

• “Normal”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{fontStyle: "Italic"}}}},
   });
</script>

labelSettings.lowerLevel.style.font.fontWeight string

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

Default Value

• “regular”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{fontWeight: "regular"}}}},
   });
</script>

labelSettings.lowerLevel.style.font.opacity string

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

Default Value

• “12px”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{opacity: "14px"}}}},
   });
</script>

labelSettings.lowerLevel.style.font.size string

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

Default Value

• “12px”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{font:{size: "14px"}}}},
   });
</script>

labelSettings.lowerLevel.style.horizontalAlignment string

Specifies the horizontal text alignment of the text in label.

Default Value

• “middle”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ style:{horizontalAlignment: "left"}}},
   });
</script>

labelSettings.lowerLevel.visible boolean

Toggles the visibility of labels in lower level.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{lowerLevel:{ visible:false}},
   });
</script>

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

• “#333333”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{color:"#ff0000"}}},
   });
</script>

labelSettings.style.font.family string

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

Default Value

• “Segoe UI”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{family:"Arial"}}},
   });
</script>

labelSettings.style.font.opacity ` number`

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

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{opacity:0.5}}}
   });
</script>

labelSettings.style.font.size string

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

Default Value

• “1px”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{size:"12px"}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{style:"Normal"}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   labelSettings:{style:{ font:{weight:"Regular"}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  labelSettings:{style:{ horizontalAlignment:"middle"}},
   });
</script>

locale string

This property is to specify the localization of range navigator.

Default Value

• “en-US”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   locale: "en-US",
   });
</script>

navigatorStyleSettings object

Options for customizing the range navigator.

navigatorStyleSettings.background string

Specifies the background color of range navigator.

Default Value

• “#dddddd”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ background:"#ff0000"},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ border:{color:"#ff0000"}},
   });
</script>

navigatorStyleSettings.border.dashArray string

Specifies the dash array of range navigator.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ border:{dashArray:"2,3"}},
   });
</script>

navigatorStyleSettings.border.width ` number`

Specifies the border width of range navigator.

Default Value

• 0.5

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ border:{width:1}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ leftThumbTemplate:"item"},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ majorGridLineStyle:{color:"#ff0000"}},
   });
</script>

navigatorStyleSettings.majorGridLineStyle.visible boolean

Toggles the visibility of major grid lines.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ majorGridLineStyle:{visible:false}},
   });
</script>

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

HTML

//Gets or sets color of majorGridLines in range navigator, after initialization:
        //Gets the color of majorGridLines in range navigator
        $("#container").ejRangeNavigator("option", "navigatorStyleSettings.majorGridLineStyle.color");
                      
        //Sets the color of majorGridLines in range navigator

navigatorStyleSettings.minorGridLineStyle.visible boolean

Toggles the visibility of minor grid lines.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ majorGridLineStyle:{visible:false}},
   });
</script>

navigatorStyleSettings.opacity ` number`

Specifies the opacity of RangeNavigator.

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ opacity:0.5},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ rightThumbTemplate:"item"},
   });
</script>

navigatorStyleSettings.selectedRegionColor string

Specifies the color of the selected region in range navigator.

Default Value

• “#EFEFEF”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectedRegionColor:"#ff0000"}},
   });
</script>

navigatorStyleSettings.selectedRegionOpacity number

Specifies the opacity of Selected Region.

Default Value

• 0

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectedRegionOpacity:0.5},
   });
</script>

navigatorStyleSettings.thumbColor string

Specifies the color of the thumb in range navigator.

Default Value

• “#2382C3”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ thumbColor:"#ff0000"},
   });
</script>

navigatorStyleSettings.thumbRadius number

Specifies the radius of the thumb in range navigator.

Default Value

• 10

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ thumbRadius:15},
   });
</script>

navigatorStyleSettings.thumbStroke string

Specifies the stroke color of the thumb in range navigator.

Default Value

• “#303030”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ thumbStroke:"#ff0000"},
   });
</script>

navigatorStyleSettings.unselectedRegionColor string

Specifies the color of the unselected region in range navigator.

Default Value

• “#5EABDE”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ unselectedRegionColor:"#ff0000"},
   });
</script>

navigatorStyleSettings.unselectedRegionOpacity number

Specifies the opacity of Unselected Region.

Default Value

• 0.3

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ unselectedRegionOpacity:0.5},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ highlightSettings:{enable: true}},
   });
</script>

navigatorStyleSettings.highlightSettings.color string

To set the color to the highlight.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ highlightSettings:{color: "red"}},
   });
</script>

navigatorStyleSettings.highlightSettings.opacity number

To set the opacity to the highlight.

Default Value

• 0.5

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ highlightSettings:{opacity: 0.4}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ highlightSettings:{border: {color: "yellow"}}},
   });
</script>

navigatorStyleSettings.highlightSettings.border.width number

To set the border width to the highlight.

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ highlightSettings:{border: {width: 1.4}}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectionSettings:{enable: true}},
   });
</script>

navigatorStyleSettings.selectionSettings.color string

To set the color to the selection.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectionSettings:{color: "red"}},
   });
</script>

navigatorStyleSettings.selectionSettings.opacity number

To set the opacity to the selection.

Default Value

• 0.5

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectionSettings:{opacity: 0.4}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectionSettings:{border: {color: "yellow"}}},
   });
</script>

navigatorStyleSettings.selectionSettings.border.width number

To set the border width to the selection.

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   navigatorStyleSettings:{ selectionSettings:{border: {width: 1.4}}},
   });
</script>

padding string

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

Default Value

• “0”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   padding: "15";
   });
</script>

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

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  rangePadding: "normal",
   });
</script>

rangeSettings object

Options for customizing the starting and ending ranges.

rangeSettings.end string

Specifies the ending range of range navigator.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   rangeSettings:{end:"01/05/1993"}
   });
</script>

rangeSettings.start string

Specifies the starting range of range navigator.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   rangeSettings:{start:"01/05/1993"},
   });

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   selectedRangeSettings:{end:"01/05/1993"},
   });
</script>

selectedRangeSettings.start string

Specifies the starting range of range navigator.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  selectedRangeSettings:{start:"01/05/1992"},
   });
</script>

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

JS

$("#container").ejRangeNavigator({
          scrollRangeSettings:{end:"01/05/1993"},
   });

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

JS

$("#container").ejRangeNavigator({
      scrollRangeSettings:{start:"01/05/1992"},
   });

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   sizeSettings: { height : "130" },
   });
</script>

sizeSettings.width string

Specifies width of the range navigator.

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   sizeSettings: { width : "900" },
   });
</script>

theme string

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

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   theme: "flatdark";
   });
</script>

tooltipSettings object

Options for customizing the tooltip in range navigator.

Example

HTML

$("#container").ejRangeNavigator({
   tooltipSettings: { visible: true, labelFormat: "MMM/dd/yyyy", tooltipDisplayMode: "always", tooltipDisplayMode: "always" },
   });

tooltipSettings.backgroundColor string

Specifies the background color of tooltip.

Default Value

• “#303030”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{backgroundColor: "#303030"},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{font:{color : "FFFFFF"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
                tooltipSettings:{font:{family:"Arial"}}
                }); 
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{font:{fontStyle:"Normal"}}
   });
</script>

tooltipSettings.font.opacity ` number`

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

Default Value

• 1

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
  tooltipSettings:{ font:{opacity:0.5}}
   });
</script>

tooltipSettings.font.size string

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

Default Value

• “10px”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{font:{size:"12px"}},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{ font:{weight:"regular"}},
   });
</script>

tooltipSettings.labelFormat string

Specifies the format of text to be displayed in tooltip.

Default Value

• “MM/dd/yyyy”

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings: { labelFormat: "MM/dd/yyyy"}
   });
</script>

tooltipSettings.tooltipDisplayMode string

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

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{tooltipDisplayMode: "always"},
   });
</script>

tooltipSettings.visible boolean

Toggles the visibility of tooltip.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   tooltipSettings:{visible: true}
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{axisLine: {visible: true}}
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{font: {size: '12px'}}
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{majorGridLines: {visible: true}}
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{majorTickLines: {size: 3}}
   });
</script>

valueAxisSettings.majorTickLines.visible boolean

Toggles the visibility of major tick lines.

Default Value

• true

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{majorTickLines: {visible: false}}
   });
</script>

valueAxisSettings.majorTickLines.width number

Specifies width of the major tick lines.

Default Value

• 0

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{majorTickLines: {width: 3}}
   });
</script>

valueAxisSettings.range object

You can customize the range of the axis by setting minimum , maximum and interval.

valueAxisSettings.range.min number

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{range:{ min :0 }},
   });
</script>

valueAxisSettings.range.max number

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{range:{ max :100 }},
   });
</script>

valueAxisSettings.range.interval number

Default Value

• null

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{range:{ interval :10 }},
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{rangePadding: "normal"},
   });
</script>

valueAxisSettings.visible boolean

Toggles the visibility of axis in range navigator.

Default Value

• false

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueAxisSettings:{visible: true}
   });
</script>

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

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   valueType: "numeric",
   });
</script>

xName object

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

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   dataSource:"data1", 
   xName: "X"
   });
</script>

yName object

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

Example

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   dataSource:"data1", 
   yName: "Y"
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
                         zoomFactor:"1"
   });
</script>

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

HTML

<div id="RangeNavigator"></div> 
<script>
        $("#container").ejRangeNavigator({
   zoomPosition:"0",
   });
</script>

Methods

_destroy ()

destroy the range navigator widget

Returns: void

Example

HTML

<div id="container"></div> 
 
<script>
// Destroy range navigator
var obj = $("#container").data("ejRangeNavigator");
obj.destroy(); // destroy the range navigator
</script>

HTML

<div id="container"></div> 
 
<script>
$("#container").ejRangeNavigator("destroy");    
</script>

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

HTML

//load event for chart
$("#container").ejRangeNavigator({
   load: function (args) {}
});

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

HTML

//loaded event for chart
$("#container").ejRangeNavigator({
   loaded: function (args) {}
});

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

HTML

//rangeChanged event for chart
$("#container").ejRangeNavigator({
   rangeChanged: function (args) {}
});

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

JS

//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
   scrollChanged: function (args) {}
});

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

JS

//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
   scrollStart: function (args) {}
});

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

JS

//selectedRangeStart event for rangenavigator
$("#container").ejRangeNavigator({
   selectedRangeStart: function (args) {}
});

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

JS

//selectedRangeEnd event for rangenavigator
$("#container").ejRangeNavigator({
   selectedRangeEnd: function (args) {}
});

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

JS

//scrollbarChanged event for rangenavigator
$("#container").ejRangeNavigator({
   scrollEnd: function (args) {}
});

Click

Fires, on clicking 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

JS

//Click event for range navigator

$("#container").ejRangeNavigator({

    click: function (args) {
              //Do something
    }
   
});

doubleClick

Fires, on double clicking 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

JS

//DoubleClick event for range navigator.

$("#container").ejRangeNavigator({

    doubleClick: function (args) {
              //Do something
    }
   
});

rightClick

Fires, on right clicking 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

JS

//RightClick event for range navigator

$("#container").ejRangeNavigator({
    rightClick: function (args) {
              //Do something
    }
   
});