PrimeFaces Knob

It is an input component which is used to get numeric value. It is used to get user input in a specified range. PrimeFaces provides <p:knob> component which is used to create a graphical circle. We can select any numeric value from that. It also provides various attributes that are tabled below.

Knob Attributes

Attribute	Default value	Type	Description
Value	null	Object	It is used to set value of the component.
required	false	Boolean	It is used to mark component as required.
min	0	Integer	It represents min valid value of the component.
max	100	Integer	It is used to set max valid value of the component.
step	1	Integer	It is used t to set Increment/decrement step of the component.
thickness	null	Float	It is used to set thickness of the bar.
width	auto	String	It is used to set width of the component.
height	auto	String	It is used to set height of the component.
foregroundColor	null	Object	It is used to set foreground color of the component.
backgroundColor	null	Object	It is used to set background color of the component.
colorTheme	null	String	It is used to set theme of the knob.
disabled	false	Boolean	It disables the input element.
showLabel	true	Boolean	It is used to hide/show the label.
cursor	false	Boolean	When set true to show only a cursor instead of the full bar.
labelTemplate	{value}	String	Template of the progress value.

Example

Here, in the following example, we are implementing <p:knob> component. This example contains the following files.

JSF File

// knob.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Knobs</title>
</h:head>
<h:body>
<h:form>
<p:growl autoUpdate="true"/>
<h3 style="margin-top:0">Provide input in Range</h3>
<div class="knob-container ui-corner-all">
<p:knob value="#{knob.value}">
<p:ajax listener="#{knob.onChange}"/>
</p:knob>
</div>
</h:form>
</h:body>
</html>

ManagedBean

// Knob.java

package com.javatpoint;
import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
@ManagedBean
public class Knob implements Serializable {  
private int value = 30;  
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));  
}  
}  

Output: