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

<style type="text/css">
    .knob-container {
        display: inline-block;
        padding: 10px;
    }
</style>

<p:growl>
    <p:autoUpdate />
</p:growl>

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