Knob

import Knob from 'frui/field/Knob';

Copy

Props

Name	Type	Required	Notes
defaultValue	number	No	Initial value for uncontrolled usage.
value	number	No	Controlled value of the knob.
onChange	function	No	Callback when value changes.
name	string	No	Name for hidden input (for form submissions).
min	number	No	Minimum value. Default is 0.
max	number	No	Maximum value. Default is 100.
step	number	No	Step size when adjusting. Default is 1.
size	number	No	Size of the knob in pixels.
stroke	number	No	Thickness of the knob stroke.
valueColor	string	No	Color of the active stroke.
rangeColor	string	No	Color of the background track.
textColor	string	No	Color of the label text.
valueTemplate	string	No	Template for displaying the value.

To use the knob, pass a value and an onChange callback.

<Knob defaultValue={35} />

Copy

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

To use the min/max, pass a value for min and an max .

<Knob 
  value={min} 
  onChange={setMin} 
  min={10} 
  max={80} 
/>

Copy

The size of the step is defined by the step property.

<Knob 
  value={stepped} 
  onChange={setStepped} 
  step={10} 
/>

Copy

To change the size of the knob component, pass a value for step

<Knob 
  value={customSize} 
  onChange={setCustomSize} 
  size={150} 
/>

Copy

To change thickness of stroke, pass a value for stroke .

<Knob 
  value={thickStroke} 
  onChange={setThickStroke} 
  stroke={15} 
/>

Copy

To change color of the value, pass a value for valueColor . For the text color, pass a value to textColor .

<Knob 
  value={colorful} 
  onChange={setColorful} 
  valueColor="#e91e63" 
  textColor="#e91e63" 
/>

Copy

To change color for the range, pass a value for rangeColor . For the value, pass a value for valueColor .

<Knob 
  value={tracked} 
  onChange={setTracked} 
  rangeColor="#ccc" 
  valueColor="#4caf50" 
/>

Copy

To change the label, pass a value for valueTemplate

<Knob 
  value={value} 
  onChange={setValue} 
  valueTemplate="{}%" 
  textColor="#333" 
/>

Copy

You can add your own custom class to knob or use the frui-field-knob CSS class.