Knob's useful to insert numeric values in a range.
<p:growl>
<p:autoUpdate/>
</p:growl>
<h:form>
<div class="card">
<div class="grid text-center">
<div class="field col-12 md:col-4">
<h5 style="margin-top:0">Basic</h5>
<p:knob value="#{knobView.value}">
<p:ajax listener="#{knobView.onChange}"/>
</p:knob>
</div>
<div class="field col-12 md:col-4">
<h5>Max-Min and Step</h5>
<div class="knob-container ui-corner-all">
<p:knob max="1000" step="50" value="950"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Show-Hide Label</h5>
<div class="knob-container ui-corner-all">
<p:knob showLabel="false" value="65"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Label template</h5>
<div class="knob-container ui-corner-all">
<p:knob labelTemplate="{value}%" value="35"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Disabled</h5>
<div class="knob-container ui-corner-all">
<p:knob disabled="true" value="85"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Cursor</h5>
<div class="knob-container ui-corner-all">
<p:knob cursor="true" value="0"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Thickness</h5>
<div class="knob-container ui-corner-all">
<p:knob thickness=".5" value="50"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Theme</h5>
<div class="knob-container ui-corner-all">
<p:knob colorTheme="hot-sneaks" value="45"/>
</div>
</div>
<div class="field col-12 md:col-4">
<h5>Colors</h5>
<div class="knob-container ui-corner-all">
<p:knob foregroundColor="#2196F3" backgroundColor="#495057" value="25"/>
</div>
</div>
</div>
</div>
</h:form>
@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));
}
}