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