Knob
Knob's useful to insert numeric values in a range.
<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>
@Named
@RequestScoped
public class KnobView implements Serializable {
private int value = 50;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public void onChange(){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "You have selected: " + value, null));
}
}
