jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

Custom Elements

  • Javascript/jQuery
  • Angular
  • React
  • Vue
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

Custom Elements

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout

jqxRangeSelector

  • Default Functionality
  • Date Scale
  • Time Scale
  • Numeric Scale
  • Negative Scale
  • Decimal Scale
  • Background Image
  • RangeSelector as a Filter
  • Fluid Size
  • Customized Markers
  • Right to Left Layout
Theme:
  • Demo
  • View Source
  • API Reference
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element DataScale</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of data scale in Custom Element RangeSelector." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
JQXElements.settings['RangeSelectorSettings'] =
{
min: new Date(2018, 0, 1),
max: new Date(2018, 11, 31),
labelsOnTicks: false,
range: {
from: new Date(2018, 3, 15),
to: new Date(2018, 7, 29)
},
majorTicksInterval: 'month',
minorTicksInterval: 'day',
labelsFormat: 'MMM',
markersFormat: 'd'
};
</script>
</head>
<body>
<div class="example-description">
This is an example of data scale in Custom Element RangeSelector.
</div>
<jqx-range-selector settings="RangeSelectorSettings"></jqx-range-selector>
</body>
</html>

Properties

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
disabled:true, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
showGroupLabels boolean false

Sets or gets the showGroupLabels property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
showGroupLabels:true, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
labelsOnTicks boolean true

Sets or gets the labelsOnTicks property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
labelsOnTicks:false, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
markersFormatFunction callback function null

Sets or gets the markersFormatFunction property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
markersFormatFunction:"markersFormatFunction", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
height number 100

Sets or gets the height property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
labelsFormat string null

Sets or gets the labelsFormat property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
labelsFormat:"p", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
labelsFormatFunction callback function null

Sets or gets the labelsFormatFunction property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
labelsFormatFunction:"labelsFormatFunction", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
labelPrecision number 0

Sets or gets the labelPrecision property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
labelPrecision:1, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
moveOnClick boolean true

Sets or gets the moveOnClick property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
moveOnClick:false, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
markerRenderer callback function null

Sets or gets the markerRenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
markerRenderer:"markerRenderer", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
markerPrecision number 2

Sets or gets the markerPrecision property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
markerPrecision:1, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
majorLabelRenderer callback function null

Sets or gets the majorLabelRenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
majorLabelRenderer:"majorLabelRenderer", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
markersFormat string null

Sets or gets the markersFormat property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
markersFormat:"p", theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
majorTicksInterval number 10

Sets or gets the majorTicksInterval property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
minorTicksInterval number 5

Sets or gets the minorTicksInterval property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
max number 100

Sets or gets the max property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
min number 0

Sets or gets the min property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
padding string | number "auto"

Sets or gets the padding property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
padding:padding, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
range object { from: 0, to: Infinity, min: 0, max: Infinity }

Sets or gets the range property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
resizable boolean true

Sets or gets the resizable property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
resizable:false, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
rtl:true, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
showMinorTicks boolean false

Sets or gets the showMinorTicks property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
showMinorTicks:true, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
snapToTicks boolean true

Sets or gets the snapToTicks property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
snapToTicks:false, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
showMajorLabels boolean false

Sets or gets the showMajorLabels property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
showMajorLabels:true, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
showMarkers boolean true

Sets or gets the showMarkers property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
showMarkers:false, theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
theme string ""

Sets or gets the theme property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>
width number 400

Sets or gets the width property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
theme:"light"
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

Events

change Event

Code examples

Bind to the change event of jqxRangeSelector.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-range-selector").addEventListener("change", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

Methods

destroy Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-range-selector").destroy();
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

getRange Method
Parameter Type Description
None
Return Value
Object
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-range-selector").getRange();
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

render Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-range-selector").render();
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

refresh Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-range-selector").refresh();
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

setRange Method
Parameter Type Description
from number/date
to number/date
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>RangeSelector Custom Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
<script>
JQXElements.settings["rangeSelectorSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-range-selector").setRange(20,20);
}
</script>
</head>
<body>
<jqx-range-selector settings="rangeSelectorSettings"></jqx-range-selector>
</body>
</html>

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2018. All Rights Reserved.