À.¸ï&1|?"{}:+d(G™ä$ÚIÙÄNýŒÜ¬Ê	âç×@=C/¦„K¸ô¯8¨D­Ä²Ï°2G&Ìõ›"",›fn5ðvL¥ýùÅ[ì ü„»ø‘%@½L)Óàë‹QELúšø‘ ˜–A¹¹äIÈ÷¬7eÂ½Oßë¥A4*7RŠ%ŒuræÔêÃ~¶ul@ˆå†çv\*‚:W¹KÚ&¢Áúhä4âÔ¹Å‚;"ç2Á€@rðÝÔByîÌÇ;l”€«$`9¬üÐY$Ë3ÕKTêZ}¢£°Sè¹…ê“.±Ng±çô”QcQóð`˜Ì¬C{63ÐË‘øx§Ú;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ \ócƒ"¨ i×(eÍü¼ñL¡—O‹²Ä^<«÷^™3ˆ)	æ7=Éæø`ç&LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn öÀRŽÐÜ?ÊWË´‘ëæO ò¼þ+í>—‡‘U4CJè>r€¢î7~¯£?Sö/ãŸ]cqœD!Ž°	“5æøè¨X Ý é}gi%¶7¬7þ’Ýš{¢	ñÁ]/Â/€‰cmtÜ»ÿ3Áº~éêñêÛhÍ€(DðÛZ,9ÿïÓß¸ ÿ:oBÆMOÕÑŽ-ÍXhëH<¤ð¿Ü™D0÷ QM}ÓÆ7&ÔaÁ¦Èqu†÷O…ÛÆž4]êCŠJoíÌvxB£‡¹Ã!\+(E‹	_"IlÌšæ‹)ë—V]ÌOCW®kÅuh›šð@X&T«¿ÒA5…›Œñ_:ƒÇÅ€7íh™m?ì“Ïä;Lum‚TÌƒ=¼E¸½G‹=WþÒ<u+£ë™uà;– 'ƒ¼Œ¢€2«–sø“‰`¥(p'$Eâ…a¶áˆ^÷¶=é¨c@i‚ÚÍ`gƒæHŽ;ðÜ/¼:£t"ÐŒÙ?K¾ŸœÇu¨¹M«™òL/¢	=¦ÍÈ’§_A",&$[y…¢=·ÿ2‰é4Æô:­›t6ËFÿO€gf/ìèuŽïVçîvóÄ’‰±É†õüÛà$¿>kJ.|£Ô.…Žx(„(ÄgRA»É4^PÑ,bY¾a"þ¾^I Š5]»´ª±ž'/â×.ÝÑ‚«ßª:Ô£”e|Ë~}XÇP¯Q„y¤Ïµ
ìEŠsQkÐ×E‰GðKoÏ“gaÝÄ.yù¨Ûžý*57©ÇíàË‡GHˆ­ñv[w,r,°ûîiMècââìÂ[~ÝÚ?^TÝ¹¿LvÈWGë¾;H¾ÚñµÔ¢åª†Ú­Ä*	@Š0‡;ÃžÕ‰Ò”eŠ~¢M„Ý )z&zÂœ>Ï;²‘Î˜|ˆ>â t™zpÅ ¹(¥š“-‹‡kxG>ÅÝC#é¾1!Ëõ£ôÕ&ëôÂÃÙÑöÊp	
å€½½œ™—ž?i:Z¾¨ºÑÈ¦³É“r¾ÝfQi*¼	L—h¸‘l¶)ôî·
à/×øÝÿ	Û8nnà&,ô‚`\ÍfPÌ:
ûGDä¸çÊÛ8nnà&,ô‚`\ÍfP¾œMOl÷`©Ó3æàx%àŒ%(ËemØU18#Øì…F¿¾E¬s,F)+óØâÆ`Íhjy®½ë“¾«T•¤"-ÐØcFC™Ä¶ôê¬qÓV­#ôÓ(M;ÏÔ*DQP‡^®N½Î†*h4§_L¸§¦€ùujj2±áÁ7Ü<ÄØå¥µ*kÄB›Ù~	É‡ é}!ÛÝ„#jr¥9eMIN¾íþˆÞ“Za<´¡Ûð“Ú*7[HºkÕ‚Z§à¬jÉ¥Òh)2‘é¡ål«Fw1?°4"«É“I†)­÷€€ù'âè:dÛ8nnà&,ô‚`\Íf_ƒ™Ã‚D.ÝJ5Xý¯DØ
øDj£±ìã×†’KŒ>‘´Ž¡}aý›¸q…­Ÿ«5+a_4jÖ¤ýq·Í¤"-ÐØcFC™Ä¶ôêÕïc`û,þ#Aq¦8ª¬Ò©Û8nnà&,ô‚`\ÍfôïÊåR?ïÔœDŽ¶scS¡2K(“ƒÃ] d½áÁ7Ü<ÄØå¥µ*kÄBy¥Æ	(¼÷Ýá|Ð‡:¾¼/’(ÀÓÉ~õ*‹ÖSõ&L–{Òu0"fJÏòO–¾7¼—æçöåé‹K$žíœ¥/{º;œ–T¢Éí¤U<!Ç™€‡Žœ	F.eRE	vMYtïîÕç»~Áõ^¤–4Ëæ¿TKŠ¾&AH9áu@%—Å¥ðôË¼L.é	•I…Ì>œ”¾ƒc„ßiŠ†I¯Â‡Ì˜…ø i'LumâH¶Q¨ê5_\–ÅÁ&WaEæV¦ëáe@‡=úGa—«ª¤™-<ÀaÅWÕ*È¤àóŒ˜¹j3¶¢æ)0^º.wv¹kl˜7X~<^.,$\û®Dùvèð†µÛ8nnà&,ô‚`\ÍfÍÒ‡(ðÏßJ8[R¼{ïfÝÛ8nnà&,ô‚`\Íf•Ö>šÛyõEÀ¤I^˜n¥º*]eSÝ²r%”SÜ‹ôÛaÛ<ì”œ×Kß›NxÎIÿMÃ®Û8nnà&,ô‚`\Íf!Å¦‹vPª!ÞÔ%hØÛ8nnà&,ô‚`\ÍfK¨?Ò¿ø\þž„Ö'>Þ'^òÌZÆ\ÿc'ˆ(ÖU¤"-ÐØcFC™Ä¶ôê#!ø£(L}fË?÷ËþbœDQP‡^®N½Î†*h4§Û8nnà&,ô‚`\ÍfWŸÍb¯18_oYX¹ïÐÝmú6m.^¥-ÐÌž†øP6ÿOŸJ5ƒËû¼RÔ	O›#Û8nnà&,ô‚`\Íf9µ²i<çŽGd·Ó1VÛ8nnà&,ô‚`\Íf°s")é0³ñèßjé~BºN¶k@ƒø)æz›c;NûÈ+)³E€§Xó¿°ê!JäycÿºtŽ2¢8ƒ^a£Ñ¾¼Ý­¸Ä™ä‡]™‰þ’±cü28Í`oµá/^Û8nnà&,ô‚`\Ífc,é)æÇ‹˜û÷OEVÛi%Û8nnà&,ô‚`\ÍfÛ8nnà&,ô‚`\ÍfÈû—ì†8e?µ¤@Y™ádþ„“œ‹ý!êŠ<]´›lKü(‚±ÃyØ†¼‚E¦U€Û8nnà&,ô‚`\Íf¡¼çüÛõØ²¡ö9ªÛ8nnà&,ô‚`\ÍfwƒÝï½Ê}Ä‡Éwü}XÇ:+ä™	5}{„i32kq›"#yCZä)º~ÚÑ‡±` „ÿßª7ÉÇœñËéUØÌ¢Š<ÖîÃ¤œT*êµxÜ$Üœ¾š>¢sÛRt\‹²Àæ•“F‚Ã«mŠ:øB­0g^¤–4Ëæ¿TKŠ¾&AH97GYPèØ~7*ÕF
½õ
ÞÇ›iÁa§PBÈÅ!ôï	•“F‚Ã«mŠ:øB­0gÛ8nnà&,ô‚`\Ífy­±ÕÁA>86 #ª!‰¬v†‰bIPp¬R"ëóÓ#ç¨*àBódŸ–ËJ4QÈwÕ[RÌ"´‘	kz›×8£ú 7±±ŠëÙ}‚AB×+¾O.Á"_}Õfô°Ahµ‡Ð»Hú8fåödEÇsÊ–%SQZÛ8nnà&,ô‚`\Ífí'&¬®†z‘MÅžÝywVüåpœ[†xk$Úí'&¬®†z‘MÅžÝywVüåpœ[†xk$Ú½×0gƒ?ßOk»&²øÎlþ^¤–4Ëæ¿TKŠ¾&AH9tËðÇïå}ž“’6§ˆ—g ,¯†Iÿ<n­ÓªQÛ8nnà&,ô‚`\Íf7š;ž-NCÝÔÁ€7¯ß_=é¾Ù;vF»ßbgÏ4fUÏ§#‘M¢7§ÞÛ8nnà&,ô‚`\Íf­Â“4¼Ÿ5ÿŒ¶PÿÇ3ÜŒ‘õ‹ªî‰ŽöWb”o>‘´Ž¡}aý›¸q…­Ÿ«5+a_4jÖ¤ýq·Í¤"-ÐØcFC™Ä¶ôêÕïc`û,þ#Aq¦8ª¬Ò©Û8nnà&,ô‚`\Íf¶­<yÐ~@tÂ½xê™\}è/¢ÜþîŠ2&î˜\˜Û8nnà&,ô‚`\Ífâ5||—;Ün^Ãwë}q@a<´¡Ûð“Ú*7[HºkÕþR[9Ä¹¹\Ðò€.éž(q*Ù“oÔS–ðÈœÜÍDQP‡^®N½Î†*h4§ñ‹÷È«|õ¿ßFÄoÝî _‘l¶)ôî·
à/×øÝÿ	Û8nnà&,ô‚`\Ífö¼³änYô¢<|ÎMK1¹‡Ã=.«Ë®{¶jðp†]BU¹«…t¹k±4IžüYÛ8nnà&,ô‚`\Íf­fÈäØãjœw¶Òóœs«ô=Ù’‰*ƒßI£:¯ïré‘8%ùˆ&`nJŒ» _61¶ŽÖ®%ï¨ÂG¨<>6°k’.57¬jHª_Lej¢Ÿ}¹Á³éw
hƒTÛ8nnà&,ô‚`\Íföv‘ƒî¶£køQ¯©&Û8nnà&,ô‚`\ÍfÑ³áž Ž5ö¹¼ý†ôõ¬OÈð6$–¨†ª@÷¡Ò5ros¹W,JÊ„‰x˜DƒM LÈB® -‚$¨O«ûÛ8nnà&,ô‚`\ÍfZÆG×y¾ê6rÂWÐ‘bçþ4 Ü˜¾‘+QU$Hœ_zÛ8nnà&,ô‚`\Íf¼þ‹o.G@RÍ7ÿžÛ8nnà&,ô‚`\ÍfæqLÝ˜Ï–Þô“øÅâ¤"-ÐØcFC™Ä¶ôêÛ8nnà&,ô‚`\Ífóˆå&:ƒ¦;ÄßÍÉùþ­PÅ}Ïy*…ÞÊ­èu
óèß_˜9•pBÌ pûÂóksÛ8nnà&,ô‚`\ÍfÁ[¶˜¬œõ¾°}ÿó,´ÎvæÂt¿¿¶gR¹øM¶§_ŠÄ#ºÌ6jÅÛ8nnà&,ô‚`\ÍfVqí‚€(Ë÷ÏCs‰Þ Û8nnà&,ô‚`\Ífž¿Èx“ÝÒ¤±1Ë„"›¡%—~h“RCpŸ~·èÛ8nnà&,ô‚`\Ífèé§NDËïéi‡Ç¤"-ÐØcFC™Ä¶ôêÛ8nnà&,ô‚`\Íf¡Zr‰U.¥÷ðÙñhã )³wÿm‚<€Å?¤£J¬j³[Sö,áO#E<Êbþ£                    </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ height: 75 });</code></pre>
                            <p>
                                Get the <code>height</code> property.
                            </p>
                            <pre><code>var height = $("jqxRangeSelector").jqxRangeSelector("height");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jvH69/">height is set to 100</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>labelFormat</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the format of the labels.<br />
                                Possible number formats:
                            </p>
                            <ul>
                                <li>'d' - decimal numbers;</li>
                                <li>'f'- floating-point numbers;</li>
                                <li>'n' - integer numbers;</li>
                                <li>'c' - currency numbers;</li>
                                <li>'p' - percentage numbers.</li>
                            </ul>
                            <p>
                                Possible date formats:
                            </p>
                            <p>
                                <i>Note</i>: When the data type is date, the <code>labelFormat</code> property must
                                                                                        always be set.
                            </p>
                            <ul>
                                <li>'d' - the day of the month;</li>
                                <li>'dd' - the day of the month;</li>
                                <li>'ddd' - the abbreviated name of the day of the week;</li>
                                <li>'dddd' - the full name of the day of the week;</li>
                                <li>'h' - the hour, using a 12-hour clock from 1 to 12;</li>
                                <li>'hh' - the hour, using a 12-hour clock from 01 to 12;</li>
                                <li>'H' - the hour, using a 24-hour clock from 0 to 23;</li>
                                <li>'HH' - the hour, using a 24-hour clock from 00 to 23;</li>
                                <li>'m' - the minute, from 0 through 59;</li>
                                <li>'mm' - the minutes,from 00 though 59;</li>
                                <li>'M' - the month, from 1 through 12;</li>
                                <li>'MM' - the month, from 01 through 12;</li>
                                <li>'MMM' - the abbreviated name of the month;</li>
                                <li>'MMMM' - the full name of the month;</li>
                                <li>'s' - the second, from 0 through 59;</li>
                                <li>'ss' - the second, from 00 through 59;</li>
                                <li>'t' - the first character of the AM/PM designator;</li>
                                <li>'tt' - the AM/PM designator;</li>
                                <li>'y' - the year, from 0 to 99;</li>
                                <li>'yy' - the year, from 00 to 99;</li>
                                <li>'yyy' - the year, with a minimum of three digits;</li>
                                <li>'yyyy' - the year as a four-digit number.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>labelFormat</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ labelFormat: 'c' });</code></pre>
                            <p>
                                Get the <code>labelFormat</code> property.
                            </p>
                            <pre><code>var labelFormat = $("jqxRangeSelector").jqxRangeSelector("labelFormat");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q549Q/">labelFormat is set to 'p'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span29'>labelsFormatFunction</span>
                    </td>
                    <td>
                        <span>callback function</span>
                    </td>
                    <td>
                        null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                A custom callback function for rendering the labels. Has one argument - the value
                                of the label.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>labelsFormatFunction</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ labelsFormatFunction: function (value){
                            return "&lt;span style='color: red;'&gt;" + value + "&lt;span&gt;"; } });</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tM6KS/">labelsFormatFunction is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span26'>labelPrecision</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>0
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                If <code>labelRenderer</code> and <code>labelFormat</code> are not defined, sets
                                                                                        the precision of the displayed numbers in the labels.
                            </p>
                            <p>
                                <i>Note</i>: <code>labelPrecision</code> applies only when the data type is numeric.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>labelPrecision</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ labelPrecision: 1 });</code></pre>
                            <p>
                                Get the <code>labelPrecision</code> property.
                            </p>
                            <pre><code>var labelPrecision = $("jqxRangeSelector").jqxRangeSelector("labelPrecision");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UmpzM/">labelPrecision is set to 1</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span35'>moveOnClick</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the position of the slider can be changed by clicking on the
                                                                                        range selector.<br />
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>moveOnClick</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ moveOnClick: false });</code></pre>
                            <p>
                                Get the <code>moveOnClick</code> property.
                            </p>
                            <pre><code>var moveOnClick = $("jqxRangeSelector").jqxRangeSelector("moveOnClick");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2gDq7/">moveOnClick is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span31'>markerRenderer</span>
                    </td>
                    <td>
                        <span>callback function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                A custom callback function for rendering the markers. Has two arguments - the value
                                                                                        of the marker and the position of the marker - either <i>"left"</i> or <i>"right"</i>.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>markerRenderer</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ markerRenderer: function (value,
                            position) { var position; if (position == "left") { position = "From"; } else if
                            (position == "right") { position = "To"; }; return position + ": <span style='font-style: italic;'>
                                " + value + "</span>"; } });</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Yhz9a/">markerRenderer is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span28'>markerPrecision</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>2
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                If <code>markerRenderer</code> and <code>markerFormat</code> are not defined, sets
                                                                                        the precision of the displayed numbers in the markers.
                            </p>
                            <p>
                                <i>Note</i>: <code>markerPrecision</code> applies only when the data type is numeric.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>markerPrecision</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ markerPrecision: 3 });</code></pre>
                            <p>
                                Get the <code>markerPrecision</code> property.
                            </p>
                            <pre><code>var markerPrecision = $("jqxRangeSelector").jqxRangeSelector("markerPrecision");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d5RqF/">markerPrecision is set to 1</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span30'>majorLabelRenderer</span>
                    </td>
                    <td>
                        <span>callback function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                A custom callback function for rendering the major labels. Has two arguments - the
                                                                                        value of the major label and the date object.
                            </p>
                            <p>
                                <i>Note</i>: major labels are applied only if the data type is date.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>majorLabelRenderer</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ majorLabelRenderer: function (value,
                            date) { return "&lt;span style='font-style: italic;'&gt;" + value + "&lt;span&gt;";
                            } });</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fHKZ9/">majorLabelRenderer is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span22'>markerFormat</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the format of the markers.<br />
                                Possible number formats:
                            </p>
                            <ul>
                                <li>'d' - decimal numbers;</li>
                                <li>'f'- floating-point numbers;</li>
                                <li>'n' - integer numbers;</li>
                                <li>'c' - currency numbers;</li>
                                <li>'p' - percentage numbers.</li>
                            </ul>
                            <p>
                                Possible date formats:
                            </p>
                            <p>
                                <i>Note</i>: When the data type is date, the <code>markerFormat</code> property
                                                                                        must always be set.
                            </p>
                            <ul>
                                <li>'d' - the day of the month;</li>
                                <li>'dd' - the day of the month;</li>
                                <li>'ddd' - the abbreviated name of the day of the week;</li>
                                <li>'dddd' - the full name of the day of the week;</li>
                                <li>'h' - the hour, using a 12-hour clock from 1 to 12;</li>
                                <li>'hh' - the hour, using a 12-hour clock from 01 to 12;</li>
                                <li>'H' - the hour, using a 24-hour clock from 0 to 23;</li>
                                <li>'HH' - the hour, using a 24-hour clock from 00 to 23;</li>
                                <li>'m' - the minute, from 0 through 59;</li>
                                <li>'mm' - the minutes,from 00 though 59;</li>
                                <li>'M' - the month, from 1 through 12;</li>
                                <li>'MM' - the month, from 01 through 12;</li>
                                <li>'MMM' - the abbreviated name of the month;</li>
                                <li>'MMMM' - the full name of the month;</li>
                                <li>'s' - the second, from 0 through 59;</li>
                                <li>'ss' - the second, from 00 through 59;</li>
                                <li>'t' - the first character of the AM/PM designator;</li>
                                <li>'tt' - the AM/PM designator;</li>
                                <li>'y' - the year, from 0 to 99;</li>
                                <li>'yy' - the year, from 00 to 99;</li>
                                <li>'yyy' - the year, with a minimum of three digits;</li>
                                <li>'yyyy' - the year as a four-digit number.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>markerFormat</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ markerFormat: "MMMM" });</code></pre>
                            <p>
                                Get the <code>markerFormat</code> property.
                            </p>
                            <pre><code>var markerFormat = $("jqxRangeSelector").jqxRangeSelector("markerFormat");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/h366N/">markerFormat is set to 'p'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>majorTicksInterval</span>
                    </td>
                    <td>
                        <span>Number/Object/String</span>
                    </td>
                    <td>10
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the interval between major ticks.
                                                                                        <br />
                                Possible values:
                            </p>
                            <ul>
                                <li>number;</li>
                                <li>object with one of the properties: { milliseconds, seconds, minutes, hours, days,
                                                                                            weeks, months, years };
                                </li>
                                <li>one of the following strings: "millisecond", "second", "minute", "hour", "day",
                                                                                            "week", "month", "year".
                                </li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>majorTicksInterval</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ majorTicksInterval: { days: 2}
                            });</code></pre>
                            <p>
                                Get the <code>majorTicksInterval</code> property.
                            </p>
                            <pre><code>var majorTicksInterval = $("jqxRangeSelector").jqxRangeSelector("majorTicksInterval");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lf6AN/">majorTicksInterval is set to 10</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>minorTicksInterval</span>
                    </td>
                    <td>
                        <span>Number/Object/String</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the interval between minor ticks.
                                                                                        <br />
                                Possible values:
                            </p>
                            <ul>
                                <li>number;</li>
                                <li>object with one of the properties: { milliseconds, seconds, minutes, hours, days,
                                                                                            weeks, months, years };
                                </li>
                                <li>one of the following strings: "millisecond", "second", "minute", "hour", "day",
                                                                                            "week", "month", "year".
                                </li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>minorTicksInterval</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ minorTicksInterval: "hour" });</code></pre>
                            <p>
                                Get the <code>minorTicksInterval</code> property.
                            </p>
                            <pre><code>var minorTicksInterval = $("jqxRangeSelector").jqxRangeSelector("minorTicksInterval");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NZEcV/">minorTicksInterval is set to 1</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>max</span>
                    </td>
                    <td>
                        <span>Number/Date object/Date string</span>
                    </td>
                    <td>100
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the maximum value of the range selector scale.<br />
                                Possible values:
                            </p>
                            <ul>
                                <li>number;</li>
                                <li>date object;</li>
                                <li>date string.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>max</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ max: 300 });</code></pre>
                            <p>
                                Get the <code>max</code> property.
                            </p>
                            <pre><code>var max = $("jqxRangeSelector").jqxRangeSelector("max");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mUAbZ/">max is set to 95</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>min</span>
                    </td>
                    <td>
                        <span>Number/Date object/Date string</span>
                    </td>
                    <td>0
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the minimum value of the range selector scale.<br />
                                Possible values:
                            </p>
                            <ul>
                                <li>number;</li>
                                <li>date object;</li>
                                <li>date string.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>min</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ min: "August 17, 2013" });</code></pre>
                            <p>
                                Get the <code>min</code> property.
                            </p>
                            <pre><code>var min = $("jqxRangeSelector").jqxRangeSelector("min");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/692MC/">min is set to 5</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>padding</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>"auto"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the range selector's padding.<br />
                                Possible values:
                            </p>
                            <ul>
                                <li>"auto";</li>
                                <li>"Npx", where N is a number;</li>
                                <li>numeric value in pixels.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>padding</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ padding: "0px" });</code></pre>
                            <p>
                                Get the <code>padding</code> property.
                            </p>
                            <pre><code>var padding = $("jqxRangeSelector").jqxRangeSelector("padding");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kumWj/">padding is set to "0px"</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>range</span>
                    </td>
                    <td>
                        <span>Object</span>
                    </td>
                    <td>{ from: 0, to: Infinity, min: 0, max: Infinity }
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                An object containing the following properties:
                            </p>
                            <ul>
                                <li>
                                    <b>from</b> - the start of the initially selected range.<br />
                                    Possible values: number, date object, date string;
                                </li>
                                <li>
                                    <b>to</b> - the end of the initially selected range;<br />
                                    Possible values: number, date object, date string;
                                </li>
                                <li>
                                    <b>min</b> - the minimum value of the selection.
                                                                                            <br />
                                    Possible values: number, object with one of the properties: { milliseconds, seconds,
                                                                                            minutes, hours, days, weeks } or one of the following strings: "millisecond", "second",
                                                                                            "minute", "hour", "day", "week"
                                </li>
                                <li>
                                    <b>max</b> - the maximum value of the selection.
                                                                                            <br />
                                    Possible values: number, object with one of the properties: { milliseconds, seconds,
                                                                                            minutes, hours, days, weeks } or one of the following strings: "millisecond", "second",
                                                                                            "minute", "hour", "day", "week"
                                </li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>range</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ range: { from: "01 October, 2013",
                            to: "10 October, 2013", min: "day", max: { days: 10}} });</code></pre>
                            <p>
                                Get the <code>range</code> property.
                            </p>
                            <pre><code>var range = $("jqxRangeSelector").jqxRangeSelector("range");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N2WuY/">range is set to from 10 to 50</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span34'>resizable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the range selector's slider can be resized.
                            </p>
                            <p>
                                <i>Note</i>: If <code>resizable</code> is set to <i>false</i>, the slider can only
                                                                                        be resized programmatically with the method <code>setValue</code>.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>resizable</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ resizable: false });</code></pre>
                            <p>
                                Get the <code>resizable</code> property.
                            </p>
                            <pre><code>var resizable = $("jqxRangeSelector").jqxRangeSelector("resizable");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zCZj3/">resizable is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span39'>rtl</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the jqxRangeSelector's right-to-left support is enabled.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rtl</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ rtl: true });</code></pre>
                            <p>
                                Get the <code>rtl</code> property.
                            </p>
                            <pre><code>var rtl = $("jqxRangeSelector").jqxRangeSelector("rtl");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wb5ZU/">rtl is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>showMinorTicks</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether minor ticks will be displayed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showMinorTicks</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ showMinorTicks: true });</code></pre>
                            <p>
                                Get the <code>showMinorTicks</code> property.
                            </p>
                            <pre><code>var showMinorTicks = $("jqxRangeSelector").jqxRangeSelector("showMinorTicks");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6h78H/">showMinorTicks is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>snapToTicks</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the slider will snap to the major and minor ticks.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>snapToTicks</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ snapToTicks: false });</code></pre>
                            <p>
                                Get the <code>snapToTicks</code> property.
                            </p>
                            <pre><code>var snapToTicks = $("jqxRangeSelector").jqxRangeSelector("snapToTicks");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/veCx3/">snapToTicks is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span32'>showMajorLabels</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the major labels will be shown.
                            </p>
                            <p>
                                <i>Note</i>: major labels are applied only if the data type is date.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showMajorLabels</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ showMajorLabels: false });</code></pre>
                            <p>
                                Get the <code>showMajorLabels</code> property.
                            </p>
                            <pre><code>var showMajorLabels = $("jqxRangeSelector").jqxRangeSelector("showMajorLabels");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4R7pq/">showMajorLabels is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span33'>showMarkers</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the markers will be shown.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showMarkers</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ showMarkers: false });</code></pre>
                            <p>
                                Get the <code>showMarkers</code> property.
                            </p>
                            <pre><code>var showMarkers = $("jqxRangeSelector").jqxRangeSelector("showMarkers");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lh7X5/">showMarkers is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span63'>theme</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>""
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the widget's theme.
                            </p>
                            jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                                                                                    base stylesheet creates the styles related to the widget's layout like margin, padding,
                                                                                    border-width, position. The second css file applies the widget's colors and backgrounds.
                                                                                    The jqx.base.css should be included before the second CSS file. In order to set
                                                                                    a theme, you need to do the following:
                                                                                    <ul>
                                                                                        <li>Include the theme's CSS file after jqx.base.css.<br />
                                                                                            The following code example adds the 'energyblue' theme.
                                                                                            <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot;type=&quot;text/css&quot;
                                    /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot;
                                    type=&quot;text/css&quot; /&gt;</code></pre>
                                                                                        </li>
                                                                                        <li>Set the widget's theme property to 'energyblue' when you initialize it.
                                                                                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ theme: 'energyblue' });</code></pre>
                                                                                        </li>
                                                                                    </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RJNcR/">theme is set to 'energyblue'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='property-name-disabled'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>400
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the range selector's width.<br />
                                Possible values:
                            </p>
                            <ul>
                                <li>"Npx", where N is a number;</li>
                                <li>numeric value in pixels.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector({ width: "200px" });</code></pre>
                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $("jqxRangeSelector").jqxRangeSelector("width");</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nQrQp/">width is set to 500</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events</h2>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>change</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the slected range is changed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>change</code> event by type: jqxRangeSelector.
                            </p>
                            <pre><code>$('#jqxRangeSelector').on('change', function () { // Some code here. });
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/J7yLJ/">Bind to the change event by type: jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span25'>destroy</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Removes the range selector from the DOM.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>destroy</code> method.
                            </p>
                            <pre><code>var header = $('#jqxRangeSelector').jqxRangeSelector('destroy');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZvWmQ/">destroy the jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>getRange</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets the selected range. Returns an object with two fields.
                            </p>
                            <p>
                                Range object fields:
                            </p>
                            <ul>
                                <li>from - the start of the selection - number or date object;</li>
                                <li>to - the end of the selection - number or date object.</li>
                            </ul>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Object</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>getRange</code> method.
                            </p>
                            <pre><code>var range = $('#jqxRangeSelector').jqxRangeSelector('getRange');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zD9qm/">gets the  range of the jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span24'>render</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Renders the range selector.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>render</code> method.
                            </p>
                            <pre><code>$('#jqxRangeSelector').jqxRangeSelector('render');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mbh4q/">renders the jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span23'>refresh</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes the range selector.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>refresh</code> method.
                            </p>
                            <pre><code>var header = $('#jqxRangeSelector').jqxRangeSelector('refresh');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9teEE/">refreshes the jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span37'>setRange</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the selected range.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>from</em></td>
                                            <td>Number/Date</td>
                                            <td></td>
                                        </tr>       
                                         <tr>
                                            <td><em>to</em></td>
                                            <td>Number/Date</td>
                                            <td></td>
                                        </tr>                                     
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>setRange</code> method.
                            </p>
                            <pre><code>// @param from - new value of the start of the selection (number, date string
                            or date object); // @param to - new value of the end of the selection (number, date
                            string or date object). $('#jqxRangeSelector').jqxRangeSelector('setRange', 30,
                            70);</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qXXkC/">sets a new range of the jqxRangeSelector.</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <br />
        </div>
</body>
</html>