<a:growl autoUpdate="true"/>

<h3 style="margin-top:0">Basic</h3>
<div class="knob-container ui-corner-all">
    <a:knob value="#{knobView.value}">
        <a:ajax listener="#{knobView.onChange}"/>
    </a:knob>
</div>

<h3>Max,Min and Step</h3>  
<div class="knob-container  ui-corner-all">
    <a:knob max="1000" step="50" value="950"/>
</div>

<h3>Show/Hide label</h3> 
<div class="knob-container  ui-corner-all">
    <a:knob showLabel="false" value="65"/>
</div>

<h3>Label template</h3> 
<div class="knob-container  ui-corner-all">
    <a:knob labelTemplate="{value}%" value="35"/>
</div>

<h3>Disabled</h3> 
<div class="knob-container ui-corner-all">
    <a:knob disabled="true" value="85"/>
</div>

<h3>Cursor</h3> 
<div class="knob-container ui-corner-all">
    <a:knob cursor="true" value="0"/>
</div>

<h3>Thickness</h3>
<div class="knob-container ui-corner-all">
    <a:knob thickness=".5" value="50"/>
</div>

<h3>Theme</h3>  
<div class="knob-container ui-corner-all">
    <a:knob colorTheme="hot-sneaks" value="45"/>
</div>

<h3>Colors</h3> 
<div class="knob-container ui-corner-all">
    <a:knob foregroundColor="red" backgroundColor="#00000" value="25"/>
    <a:knob foregroundColor="#808080" backgroundColor="#0000FF" value="75"/>
</div>