Knob Knob's useful to insert numeric values in a range.

Basic

Max,Min and Step

Show/Hide label

Label template

Disabled

Cursor

Thickness

Theme

Colors

<p:growl autoUpdate="true"/>

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

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

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

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

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

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

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

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

<h3>Colors</h3> 
<div class="knob-container ui-corner-all">
    <p:knob foregroundColor="red" backgroundColor="#00000" value="25"/>  
    <p:knob foregroundColor="#808080" backgroundColor="#0000FF" value="75"/>  
</div>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.