skin |
object |
{ type: 'simple', width: 10, color: 'rgba(255,0,0,.5)', spaceWidth: 5 } |
Type: simple or tron |
animate |
object |
{ enabled: true, duration: 1000, ease: 'bounce' } |
Duration in milliseconds, Ease: linear , bounce , sin , cubic , quad , exp , circle |
size |
integer |
200 |
Size of knob in px. It will always be a square. |
startAngle |
integer |
0 |
Start angle in degrees |
endAngle |
integer |
360 |
End angle in degrees |
unit |
string |
'' |
Unit values |
displayInput |
boolean |
true |
Display input value (true or false ) |
readOnly |
boolean |
false |
Disabled change value (true or false ) |
trackWidth |
integer |
50 |
Width track bar in px |
barWidth |
integer |
50 |
Width bar value in px |
trackColor |
string |
'rgba(0,0,0,0)' |
Color track bar |
barColor |
string |
'rgba(255,0,0,.5)' |
Color bar value |
prevBarColor |
string |
'rgba(0,0,0,0)' |
Color bar previous value |
textColor |
string |
'#222' |
Text color |
barCap |
integer |
0 |
Defines how the ending of the bar line looks like in radius |
fontSize |
string |
'auto' |
Font size in px. auto : automatic change |
subText |
object |
{ enabled: false, text: '', color: 'gray', font: 'auto' } |
Subtext options |
bgColor |
string |
'' |
Background color |
scale |
object |
{ enabled: false, type: 'lines', color: 'gray', width: 4, quantity: 20, height: 10, spaceWidth: 15 } |
Scale options, type: lines or dots |
step |
integer |
1 |
Step change, min 0.1 |
displayPrevious |
boolean |
false |
Display previous value (true or false ) |
min |
integer |
0 |
Min value (start value), only integer |
max |
integer |
100 |
Max value (end value), only integer |
dynamicOptions |
boolean |
false |
Dynamic change options (true or false ) |
rangesEnabled |
boolean |
false |
Enables or disables coloring of value bar and tron arc based on ranges (true or false ) |
ranges |
array |
[   { min: 0, max: 100,     barColor: "rgba(255,0,0,0,0.5",     textColor: '#222'} ] |
Each entry in the array defines a range that is used to color the bar based on the current value.
For each range, min/max are used to set the borders of the range, barColor defines the color of the bar and textColor (optional) defines the color of the value text displayed in the center.
If style tron is used, the tron arc does show the ranges in the corresponding color.
|