À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Ú6í|¤²èëTŸI³š]î¬æÌò
òZ½\U‘ÙÍ¡]ûSÿmwÉ%CåÏÝRJ‹hþJC«³<Måà® ¶ê¯ºh­ø*Y¨òDy,i^'
/Œ9¿®Žõõÿp–½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇ¥ÀÞíçª‹-	žÔFô
qæâ@30¼»bÎØÌl­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…“jJm2Yi€Pú˜Ã"#˜¨ö¤ø0„N!¼²'Ç¥X]°Ü¬`ÄHÆ£ÈgWz†íÇÃ§È¬]Òº5Ò°ÔœÌ1Kùr‰ºû$*Š1=ù3à
Å*yÀ«ckêÞS`ì“­òŽ˜ð÷ìWÇè‡l€uO=W-3\›¹OùJÃÆLédc©u °D-†S Tøï¢ Àô¦ZÒœ·@áÑ$×ÿQ;@T¹ûŒ8H¤x>ÚBÔjù,°ÌÐ"“|Â±MXymá*º¼Ögòå5¡¼’Te[@°$<ÀTZäŽÊ6½lE‡[Ü³y£ÐE³½ÏòxÂx=nø+f„Ow¹Îú*0ÂƒrŠ'Þ^¹Pj—E®ðBiì™ú„%ìžÂUÓêÚQŠìM2
óýÞ4UjÚ¬›ù˜7b¦PuC,žƒ»8yçÀawqëÿQÎoåy¹Ï=28uDòµá`9 ~èYæ„zb®•Î Ü·Ê:Üž}ÜW%;7tUÔ×Ò¹šïz7°»/${vè]pÊ”‚ÇŸø›jDò~½ËDtòÀ%Wœ™O7€ €"(âÚcÕÉeo=(ÕÅªíS² þ•zx±ü´Ø{€Ÿeô’î¢áÌZ{ŠÄl¢IÐíó}í’L ùm±ÿüMîßež´£Z¢:ÿÜ6µ3Ö=6ß–›Ù~	É‡ é}!ÛÝ„#ÈÛŠ¼6|½ÚO±°“2`ò$žíœ¥/{º;œ–T¢Éí_úXgÖÊã%ŠÜG±¬åD>Áp…J•]9€¦AZ·^¤–4Ëæ¿TKŠ¾&AH9=ŒP?JWXàëbßâwN×Uî
7¥‘êäîÆ)£ ßpzL—Õ¶wn5Á–¸lÔï›§q’½Õ÷ÝŽÑ´Bnà^Ñ±NÔsþ›¡œqLÊ‘l¶)ôî·
à/×øÝÿ	^¤–4Ëæ¿TKŠ¾&AH9ƒ;ž9 èŽF­4­ÇáË^çHŠ ÚC„s7°Dlk:í}:a}ÒÜ$:t©s1ÝÛ8nnà&,ô‚`\ÍfD”:aÿ=PqU£	kÞPð3?º$Í½ÑG¬ôr”`åŽâ=ß›3+ÙöÆn³DQP‡^®N½Î†*h4§¢­˜ö»·-650š§èacÊÖ9ç:XF¡ÿÃã,Ûí‰NÛ8nnà&,ô‚`\ÍfôïÊåR?ïÔœDŽ¶scS¡2K(“ƒÃ] d½AèÕ´ÚÁ>­¦gº(¥!­Û8nnà&,ô‚`\ÍfÁaYª&›ÒxûÒ&S¯XKŸ«5+a_4jÖ¤ýq·Í.òs`-tÚƒœFIÈÌx›Ù~	É‡ é}!ÛÝ„#½ä¿‹ñb…gþP°ö:óPƒ+îu|%Á"g¿Ž­Ú¡¸¥›÷£Að~Üp´û%²vŸùVjôª/5½òŽÿ”Û8nnà&,ô‚`\Íf¥9¦3L’RZØ)™€´!°Ne£¯ÆI“—!ô5]µ?œ§ŸÔóæâ(rX s#¡G‘t‹Bm%Ã
JnÆÊÁ.kDçã`ªVD’8[Lw:I•´ð]žN{c•;Û8nnà&,ô‚`\ÍfgçPB”I­[EÉƒ¸íõÛ8nnà&,ô‚`\ÍfåÕŠ«/yïo¬¤²;©¬MÀ¨ê<1r¦Ã|èÃ¢¦×9W£«¥¦èU-ß‹gpG–[hzÒýv+N÷QV´*»Ÿˆø™&wøf§4ÄØ3¯ÔÃoÁO{…Ôü;Û8nnà&,ô‚`\Íf¾9SÌëÁº ¦¾T!WK;^¤–4Ëæ¿TKŠ¾&AH9Ÿ2›6´²Ý¯_™â=ø©ø†ùýq»ºÚÅ™†W^¤–4Ëæ¿TKŠ¾&AH9BöÞ–¸ë,2\ŸxøAæÛ8nnà&,ô‚`\ÍfÍ[ìC:“sÇó+þZêÓÙë·óÁ­g?Í¸Ë	­&ÉF¶¯ôˆí†´x¢V†2qS4ö,áO#E<Êbþ£Û8nnà&,ô‚`\ÍfŒl„Wa<|2’üP^Çô¼š×Ø¦ÎS‹QoŠXRbêÚY)‚þðå}ä\@%ûk9þO÷m	×ãyeÂÕv]³8ZÈM9ªè·±°œê.¼":†·k1XšPªç>ÅÖµìZDYs?àñs-³
¸¤"-ÐØcFC™Ä¶ôêãmÚí¥Ùe/S¥:nî€Û8nnà&,ô‚`\Ífy&z4¾‹Ïo¸³Ñr!ª:cîšª2¤Ø>'Öë)ÙGy•¡Ècm¹ÍÈgýjìø¸71‹‰:T¾Já³®w¥¼ DQP‡^®N½Î†*h4§?¿p2imm}Þ@Õ=&¨Û8nnà&,ô‚`\Íf¬ê5M GP)!ˆ"U•~6oå¶ÚÌ D^=¥éyžÉÄêÜÒ*õŽ¤¥t‘|Vk_ÌGìÛ)0MBkF	ëî½%qêA×é¦g"}¯¥@¥ ä'4x÷µìZDYs?àñs-³
¸¤"-ÐØcFC™Ä¶ôêdŒ#’ZMJ&vTf•Ñ×O±„^Ú
5œè/ŠëT½§¶Eå¢f;\«Û8nnà&,ô‚`\ÍfmÇ‡™‘×êå´Šœ’Ü¦P¶Fž"%yüÔß:]²>mv3]Å~f™VDþçô2ª8u"ˆ|nè¹dÌvIx¾9Gæ·*§?§ª¬Çö~;™ËYïÞí±¾ü AœžUZ
âÕ&œ_Mä'(Ñêž¡e»bß£ÏRS^~óúð%C(ÄI‰°âÍéJ!:Bo¶È] ÁÞ°û(û†SuQ]ýå$€T”DQP‡^®N½Î†*h4§”¬XãL*ÿŸhAâq®DQP‡^®N½Î†*h4§œeAº|±VöñT\5$žíœ¥/{º;œ–T¢Éí°œæûåÍÆãƒÁsîØ“{¾— ü.ØÕâÛjr¥9eMIN¾íþˆÞ“Z¾dÏ»©”8ýzø1!)QÏpçf"ØÚgÊOï^Æï¯`t+›Ò¦,ú¬ûöY4Ï:‹±uB¤B: §8¹h»ÇÒxlEcÃ­%y²’¼§y\ÞÀmcÙë·óÁ­g?Í¸Ë	­&ÉFX–ûB1úþn2TpËƒOáÁ7Ü<ÄØå¥µ*kÄBy¥Æ	(¼÷Ýá|Ð‡:ºÙ7­5}ÿòl³Ñ+v™ÔÂHÇÈiál…Ð`¬|˜EÏs¯)ña{“ë„A¤õ.Î±_zŽÍ¼C7ò¤¨êïš¬OÏiÕ¾F£šKÕ²ü¿ðO¥µÌ†ý®²oyÐy°ëäŽÂê%ø¸/AÁâ`º’°8ÈíËXãMÍ²8˜ Ûe0àê²tä–Šöüá28æ'0s–£š¤"-ÐØcFC™Ä¶ôê‹$´—’´
ãebFF~ÝC@ýÑ-;Ãtæäi;Í½ÄÙ;(ð9¿uÁmqô ÏXr'öŠá» ‰¸RÀIÙX–?	¡ý©ò—Âr¹ ´É”`WÜv×~ÈÅŠ_¯Ô3ãj—³Ai¬f2xmõž…¡Ýø 0^@Û‡‘WÈâ!²¦®q”Qª•“F‚Ã«mŠ:øB­0gc,é)æÇ‹˜û÷OEVÛi%Û8nnà&,ô‚`\Íf¾áXÁ'·'|Ú±Wiä6Ü<»J†éº¡D¶Ì%³!zÛ²ÉdãZëg£ÔÈÔ•:z/À;ñ>ßÝß—Ãd‡#ër$õ‰X
;ÇèýŠÀ¸ö&]©•õ£«ì—@zRÓ*²Û8nnà&,ô‚`\Íf°='Ûp¾F¹rÇÖU1‹XtFq(e5!B^ô,ƒô¤"-ÐØcFC™Ä¶ôêž¿Èx“ÝÒ¤±1Ë„"›`Å`é­n*§	3íj´+¶¤"-ÐØcFC™Ä¶ôêãmÚí¥Ùe/S¥:nî€Û8nnà&,ô‚`\Íf°8ÅgÈ¯±¤#ÂGeÿgcîšª2¤Ø>'Öë)ÙGêcÚ¾Pù5®Z¶7…BQ#*S½_MmóM“æ¤"-ÐØcFC™Ä¶ôê¼þ‹o.G@RÍ7ÿžÛ8nnà&,ô‚`\ÍfwƒÝï½Ê}Ä‡Éwü}XÇ:ÈUp-0(ÙFtbg!Lw™9!íl{ô(Cã¦ˆhhtÞ‘¾\‚‹‚nðâS/DÄY¬=µ Ïowî¡ÂîD5Â\-À=N”:¶åÛ8nnà&,ô‚`\ÍfÍÒ‡(ðÏßJ8[R¼{ïfÝÛ8nnà&,ô‚`\ÍfÃé9é‹mPéwÆãþ(òîZÈM9ªè·±°œê.¬¤Þ‡ÒWÜ¿àâÕ%ÇlKü(‚±ÃyØ†¼‚E¦U€Û8nnà&,ô‚`\Íf¾9SÌëÁº ¦¾T!WK;^¤–4Ëæ¿TKŠ¾&AH9É‰çP‰¹l%'"UkÙë·óÁ­g?Í¸Ë	­&ÉFÙÉ“üp0ô%IÔ¶×Â–4ô_•3Ö[¼raÉÔÙë·óÁ­g?Í¸Ë	­&ÉFïyhêÄè såZ+»ÇÛ^¨áË‰MpÎ|—H`-›ñ¼@®\¶öx­^yæ²þÙÁŒ´"z˜Ó-”ýÌ«6ÒÎˆ‹ÄÁÝ¯ÐDQP‡^®N½Î†*h4§‚ñ
3„Z7Þ¥<ìÿÏêˆª²©!žé«B–¹äÌOa3Äc‡GZ¤j`Ü°"«²;{T›—M¶-ônç9Wìip]+ÛÕç`˜P‚	Mî2‰àµh» ¨3â®Ò!T ¶Êm^%FÐ¶¾TÊÌ¦Õ3SÌBîgúÎbTÏÃ¢E_ £à§§:…L1s«A´1•.„ô¨õžãöèæ&S&»{Žø‘</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>allowValueChangeOnMouseWheel</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 jqxKnob's value can be changed on mouse wheel.                     
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>allowValueChangeOnMouseWheel</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnMouseWheel: false });</code></pre>
                        <p>
                            Get the <code>allowValueChangeOnMouseWheel</code> property.
                        </p>
                        <pre><code>var allowValueChangeOnMouseWheel = $('#jqxKnob').jqxKnob('allowValueChangeOnMouseWheel');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnMouseWheel is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>changing</span>
                </td>
                <td>
                    <span>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>
                            Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>changing</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({changing: function(oldValue, newValue){} });</code></pre>
                        <p>
                            Get the <code>changing</code> property.
                        </p>
                        <pre><code>var changing = $('#jqxKnob').jqxKnob('changing');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-changing-property">changing is set to function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>dragEndAngle</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>
                            Sets or gets the Knob's angle where dragging the pointer will end.                   
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dragEndAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dragEndAngle: 420 });</code></pre>
                        <p>
                            Get the <code>dragEndAngle</code> property.
                        </p>
                        <pre><code>var dragEndAngle = $('#jqxKnob').jqxKnob('dragEndAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragEndAngle is set to 420</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>dragStartAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>360
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's degrees where dragging the pointer can start.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dragStartAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dragStartAngle: 120 });</code></pre>
                        <p>
                            Get the <code>dragStartAngle</code> property.
                        </p>
                        <pre><code>var dragStartAngle = $('#jqxKnob').jqxKnob('dragStartAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragStartAngle is set to 120</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>disabled</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 Knob is disabled.             
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({disabled: true });</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxKnob').jqxKnob('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-disabled-state">disabled is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>dial</span>
                </td>
                <td>
                    <span>Object</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 Knob's dial.
                            <ul>
                                <li>innerRadius - specifies the inner Radius of the dial.</li>
                                <li>outerRadius - specifies the outer Radius of the dial.</li>
                                <li>style - specifies the style of the dial. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                                <li>startAngle - dial's start angle(optional).</li>
                                <li>endAngle - dial's end angle(optional).</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>dial</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({dial: 360 });</code></pre>
                        <p>
                            Get the <code>dial</code> property.
                        </p>
                        <pre><code>var dial = $('#jqxKnob').jqxKnob('dial');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">dial is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>endAngle</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>360
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's degrees offset for the 360 location.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>endAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({endAngle: 360 });</code></pre>
                        <p>
                            Get the <code>endAngle</code> property.
                        </p>
                        <pre><code>var endAngle = $('#jqxKnob').jqxKnob('endAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">endAngle is set to 420</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>height</span>
                </td>
                <td>
                    <span>Number</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 Knob's height.                 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({height: 360 });</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxKnob').jqxKnob('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">height is set to 400</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>labels</span>
                </td>
                <td>
                    <span>Object</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 Knob's labels.
                            <ul>
                                <li>rotate - specifies if labels should be vertical or rotated with the appropriate angle.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>visible - determines the labels visibility.</li>
                                <li>step - sets the labels step.</li>
                                <li>formatFunction - function which can be used to format the labels.
                                    <br />
                                    Example:
                                    <pre><code>
formatFunction: function (label) {
    if (label == 0)
        return "Min";
    if (label == 100)
        return "Max";
    return label;
}
                                     </code></pre>
                                </li>
                                <li>style - specifies the style of the labels. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>labels</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({labels: {
    offset: '88%',
    step: 5,
    visible: true,
    formatFunction: function (label) {
        if (label == 0)
            return "Min";
        if (label == 100)
            return "Max";
        return label;
    }
});
                     </code></pre>
                        <p>
                            Get the <code>labels</code> property.
                        </p>
                        <pre><code>var labels = $('#jqxKnob').jqxKnob('labels');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">labels is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>marks</span>
                </td>
                <td>
                    <span>Object</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 Knob's marks.
                            <ul>
                                <li>colorProgress - hex color string.</li>
                                <li>colorRemaining - hex color string.</li>
                                <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li>
                                <li>minorInterval - minor ticks interval.</li>
                                <li>majorInterval - major ticks interval.</li>
                                <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>size - specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>type - "circle" or "line".</li>
                                <li>thickness - specifies thickness in case of lines.</li>
                                <li>visible - determines the labels visibility.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>marks</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({marks: 
{
    colorRemaining: { color: 'grey', border: 'grey' },
    colorProgress: { color: '#a2da39', border: '#a2da39' },
    type: 'line',
    offset: '71%',
    thickness: 3,
    size: '6%',
    majorSize: '9%',
    majorInterval: 10,
    minorInterval: 2
});</code></pre>
                        <p>
                            Get the <code>marks</code> property.
                        </p>
                        <pre><code>var marks = $('#jqxKnob').jqxKnob('marks');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">marks is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>min</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>
                            Sets or gets the Knob's min property.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>min</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({min: 0});</code></pre>
                        <p>
                            Get the <code>min</code> property.
                        </p>
                        <pre><code>var min = $('#jqxKnob').jqxKnob('min');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">min is set to 0</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>max</span>
                </td>
                <td>
                    <span>Number</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 Knob's max property.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>max</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({max: 100});</code></pre>
                        <p>
                            Get the <code>max</code> property.
                        </p>
                        <pre><code>var max = $('#jqxKnob').jqxKnob('max');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">max is set to 100</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>progressBar</span>
                </td>
                <td>
                    <span>Object/Array of Objects</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 Knob's progressBar property.
                           <ul>
                               <li>offset - specifies the progress bar's offset.</li>
                               <li>style - specifies the style of the progressBar. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1</li>
                               <li>background - specifies the background style of the progressBar. background.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1</li>
                               <li>size - specifies the progress bar's size.</li>
                               <li>ranges - array which specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1</li>
                           </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>progressBar</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({
  progressBar: {
    style: { fill: '#a2da39', stroke: 'grey' },
    size: '9%',
    offset: '60%',
    background: { fill: 'grey', stroke: 'grey' }
  }
});

</code></pre>
                        <p>
                            Get the <code>progressBar</code> property.
                        </p>
                        <pre><code>var progressBar = $('#jqxKnob').jqxKnob('progressBar');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">progressBar is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>pointer</span>
                </td>
                <td>
                    <span>Object/Array of Objects</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 Knob's pointer property.
                            <ul>
                                <li>type - specifies the pointer's type - "circle", "line", "arrow".</li>
                                <li>style - specifies the style of the pointer. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>
                                <li>size - specifies the pointer's size.</li>
                                <li>thickness - specifies the pointer's thickness.</li>
                                <li>visible - specifies whether the pointer is visible.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>pointer</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({pointer:
  { type: 'arrow', style: { fill: '#a2da39', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }}
);

</code></pre>
                        <p>
                            Get the <code>pointer</code> property.
                        </p>
                        <pre><code>var pointer = $('#jqxKnob').jqxKnob('pointer');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointer is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>pointerGrabAction</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"normal"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer").
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>pointerGrabAction</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob(
  {pointerGrabAction: "pointer"}
);

</code></pre>
                        <p>
                            Get the <code>pointerGrabAction</code> property.
                        </p>
                        <pre><code>var pointerGrabAction = $('#jqxKnob').jqxKnob('pointerGrabAction');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointerGrabAction is set to "normal"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>rotation</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"clockwise"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's rotation("clockwise" or "counterclockwise").
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>rotation</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob(
  {rotation: "counterclockwise"}
);

</code></pre>
                        <p>
                            Get the <code>rotation</code> property.
                        </p>
                        <pre><code>var rotation = $('#jqxKnob').jqxKnob('rotation');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-rotation-property">rotation is set to "counterclockwise"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>startAngle</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>
                            Sets or gets the Knob's degrees offset for the 0 location.                    
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>startAngle</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({startAngle: 120 });</code></pre>
                        <p>
                            Get the <code>startAngle</code> property.
                        </p>
                        <pre><code>var startAngle = $('#jqxKnob').jqxKnob('startAngle');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">startAngle is set to 120</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>spinner</span>
                </td>
                <td>
                    <span>Object</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 Knob's spinner.
                            <ul>
                                <li>innerRadius - specifies the inner Radius of the spinner.</li>
                                <li>outerRadius - specifies the outer Radius of the spinner.</li>
                                <li>style - specifies the style of the spinner. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li>

                                <li>marks -
                            <ul>
                                <li>rotate - sets whether spinner marks rotate with pointer.</li>
                                <li>colorProgress - hex color string.</li>
                                <li>colorRemaining - hex color string.</li>
                                <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li>
                                <li>minorInterval - minor ticks interval.</li>
                                <li>majorInterval - major ticks interval.</li>
                                <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>offset - specifies the labels offset.</li>
                                <li>size - specifies radius in case of circular lines, or length in case of lines.</li>
                                <li>type - "circle" or "line".</li>
                                <li>thickness - specifies thickness in case of lines.</li>
                                <li>visible - determines the labels visibility.</li>
                            </ul>
                                </li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>spinner</code> property.
                        </p>
                        <pre><code>
$('#jqxKnob').jqxKnob({spinner:
{
    style: { fill: { color: '#00a4e1', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
    innerRadius: '45%', // specifies the inner Radius of the dial
    outerRadius: '60%', // specifies the outer Radius of the dial
    marks: {
        colorRemaining: '#fff',
        colorProgress: '#fff',
        type: 'line',
        offset: '46%',
        thickness: 2,
        size: '14%',
        majorSize: '14%',
        majorInterval: 10,
        minorInterval: 10
    }
                
});</code></pre>
                        <p>
                            Get the <code>spinner</code> property.
                        </p>
                        <pre><code>var spinner = $('#jqxKnob').jqxKnob('spinner');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">spinner is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>style</span>
                </td>
                <td>
                    <span>Object</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 Knob's background style.     
                            <ul>
                                <li>fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]])</li>
                                <li>stroke - border color(hex string).</li>
                                <li>strokeWidth - border width.</li>
                            </ul>
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>style</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } } });</code></pre>
                        <p>
                            Get the <code>style</code> property.
                        </p>
                        <pre><code>var style = $('#jqxKnob').jqxKnob('style');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">style is set to custom object</a>
                        </div>
                    </div>
                </td>
            </tr>
            			<tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>step</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the Knob's step property. Specifies the increase/decrease step.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>step</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({step: 2});</code></pre>
                        <p>
                            Get the <code>step</code> property.
                        </p>
                        <pre><code>var step = $('#jqxKnob').jqxKnob('step');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-step-property">step is set to 10</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>snapToStep</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 the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>snapToStep</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({snapToStep: true});</code></pre>
                        <p>
                            Get the <code>snapToStep</code> property.
                        </p>
                        <pre><code>var snapToStep = $('#jqxKnob').jqxKnob('snapToStep');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">snapToStep is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>value</span>
                </td>
                <td>
                    <span>Number/Array of Numbers</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 Knob's value.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>value</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({value: 23});</code></pre>
                        <p>
                            Get the <code>value</code> property.
                        </p>
                        <pre><code>var value = $('#jqxKnob').jqxKnob('value');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">value is set to 60</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>width</span>
                </td>
                <td>
                    <span>Number</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 Knob's width.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob({width: 400});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxKnob').jqxKnob('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">width is set to 400</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='Span27'>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 value is changed. 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>change</code> event by type: jqxKnob.
                        </p>
                        <pre><code>$('#jqxKnob').on('change', 
function (event) {var args = event.args; var value = args.value; var changeSource = args.changeSource; // "pointerMove", "increment", "decrement", "val", "propertyChange" }); 
                         </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-change-event">Bind to the change event by type: jqxKnob.</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='Span68'>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>
                            Destroys the widget.
                        </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 examples</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob('destroy'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-destroy-method">destroys the jqxKnob</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>val</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 or gets the value.
                        </p>
                        <div class="methodArgs">
                            <table class="arguments">
                                <tbody>
                                    <tr>
                                        <th>Parameter</th>
                                        <th>Type</th>
                                        <th>Description</th>
                                    </tr>
                                    <tr>
                                        <td><em>value</em></td>
                                        <td>String</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            <strong>Return Value</strong><br />
                            <em>String</em>
                        </div>
                        <h4>Code examples</h4>
                        <p>
                            Get the <code>value</code>:
                        </p>
                        <pre><code>var value = $('#jqxKnob').jqxKnob('val'); or var value = $('#jqxKnob').val();</code></pre>
                        <p>
                            Set the <code>value</code>:
                        </p>
                        <pre><code>$('#jqxKnob').jqxKnob('val', 50); or $('#jqxKnob').val(50);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-val-method">sets the jqxKnob value</a>
                        </div>
                    </div>
                </td>
            </tr>

        </table>
        <br />
    </div>
</body>
</html>