Numeric and Text Fields

Loupe UX supports fields for displaying and inputting numeric and text values.

Numeric Fields

HTML elements bound to numeric machine values will be updated any time they are visible. Options are available for scaling the value, formatting its display, and adding unit text. If the machine value is bound to an input, it will be written any time the input value changes.

Class name: lux-num-value

Attribute Description Default Value
data-unit-factor Multiplication factor for unit scaling 1
data-unit-offset Offset for unit scaling 0
data-unit-text Text label to display after the value
data-fixed Number of digits after the decimal place to display in fixed-point notation
data-precision Number of significant digits to display with a specified precision
data-exponent Number of digits after the decimal to display in exponential notation
data-prevent-drag Prevents continuous update while dragging. Only applies to inputs with on drag event (ranges) false
data-pad ???
data-source-units Units of data-var-name variable, requires data-display-units
data-display-units Units to be converted into and displayed, fallback text for data-unit-text, requires data-source-units

Unit Scaling Formulae

Display Value = Machine Value * data-unit-factor + data-unit-offset Machine Value = (Display Value - data-unit-offset) / data-unit-factor

Unit Conversion

Supported Unit List (click to expand)
B
C
F
GB
GJ
GK
GL
GN
GPa
GW
Gb
Gbar
Gg
GiB
Gib
Gl
Gm
Gm2
Gm3
Gm²
Gm³
Gs
J
K
KB
Kb
KiB
Kib
L
M
MB
MJ
MK
ML
MN
MPa
MTON
MW
Mb
Mbar
Mg
MiB
Mib
Ml
Mm
Mm2
Mm3
Mm²
Mm³
Mp
Ms
N
NM
P
PB
PJ
PK
PL
PN
PPa
PW
Pa
Pb
Pbar
Pg
PiB
Pib
Pl
Pm
Pm2
Pm3
Pm²
Pm³
Ps
R
S
TB
TJ
TK
TL
TN
TPa
TU
TW
Tb
Tbar
Tg
TiB
Tib
Tl
Tm
Tm2
Tm3
Tm²
Tm³
Torr
Ts
US bsh
US bu
US bushel
US bushels
US dry bbl
US dry gal
US dry pt
US dry qt
US lc
US peck
US pk
US ton
US tons
W
a
ac
ac ft
acre
acre-feet
acre-foot
acres
ac⋅ft
are
ares
atm
atmosphere
b
bar
bars
bit
bits
board feet
board foot
byte
bytes
c
cB
cJ
cK
cL
cN
cPa
cW
ca
cb
cbar
celsius
celsius
centiare
centiares
centibar
centibars
centibit
centibits
centibyte
centibytes
centigram
centigrams
centijoule
centiliter
centilitre
centimeter
centimetre
centiwatt
centiwatts
centuries
century
cg
cl
cm
cm2
cm3
cm²
cm³
cs
cu ft
cu in
cu mi
cu yd
cubic feet
cubic foot
cubic inch
cubic mile
cubic yard
cup
cups
d
dB
dJ
dK
dL
dN
dPa
dW
da
daB
daJ
daK
daL
daN
daPa
daW
daa
dab
dabar
dag
dal
dam
dam2
dam3
dam²
dam³
das
day
days
db
dbar
dec
decabar
decabars
decabit
decabits
decabyte
decabytes
decade
decades
decagram
decagrams
decajoule
decajoules
decakelvin
decaliter
decaliters
decalitre
decalitres
decameter
decameters
decametre
decametres
decanewton
decapascal
decare
decares
decasecond
decawatt
decawatts
deciare
deciares
decibar
decibars
decibit
decibits
decibyte
decibytes
decigram
decigrams
decijoule
decijoules
decikelvin
deciliter
deciliters
decilitre
decilitres
decimeter
decimeters
decimetre
decimetres
decinewton
decipascal
decisecond
deciwatt
deciwatts
deg
degree
degrees
degs
dg
dl
dm
dm2
dm3
dm²
dm³
ds
dyn
dyne
dynes
fB
fJ
fK
fL
fN
fPa
fW
fahrenheit
fahrenheit
fb
fbar
feet
femtobar
femtobars
femtobit
femtobits
femtobyte
femtobytes
femtogram
femtograms
femtojoule
femtoliter
femtolitre
femtometer
femtometre
femtowatt
femtowatts
fg
fl
fl oz
fl. oz.
fm
fm2
fm3
fm²
fm³
fn
foot
fortnight
fortnights
fs
ft
ft2
ft3
ft²
ft³
g
gal
gallon
gallons
gibibit
gibibits
gibibyte
gibibytes
gigabar
gigabars
gigabit
gigabits
gigabyte
gigabytes
gigagram
gigagrams
gigajoule
gigajoules
gigakelvin
gigaliter
gigaliters
gigalitre
gigalitres
gigameter
gigameters
gigametre
gigametres
giganewton
gigapascal
gigasecond
gigawatt
gigawatts
gon
gons
grad
grade
grades
gradian
gradians
grads
gram
grams
h
hB
hJ
hK
hL
hN
hPa
hW
ha
halfbyte
halfbytes
hb
hbar
hectare
hectares
hectobar
hectobars
hectobit
hectobits
hectobyte
hectobytes
hectogram
hectograms
hectojoule
hectoliter
hectolitre
hectometer
hectometre
hectowatt
hectowatts
hextet
hextets
hg
hl
hm
hm2
hm3
hm²
hm³
horsepower
hour
hours
hp
hs
i
imp bbl
imp bsh
imp bu
imp fl oz
imp gal
imp pk
imp pt
imp qt
in
in2
in3
inch
inches
in²
in³
joule
joules
k
kB
kJ
kK
kL
kN
kPa
kW
kW h
kWh
kW⋅h
kb
kbar
kelvin
kelvins
kg
kgf
kibibit
kibibits
kibibyte
kibibytes
kilobar
kilobars
kilobit
kilobits
kilobyte
kilobytes
kilogram
kilograms
kilojoule
kilojoules
kilokelvin
kiloliter
kiloliters
kilolitre
kilolitres
kilometer
kilometers
kilometre
kilometres
kilonewton
kilopascal
kilopond
kiloponds
kilosecond
kilowatt
kilowatts
kip
kipf
kl
klb
klbf
km
km2
km3
km²
km³
kp
ks
l
lb
lbf
lbf/in2
lbf/in²
light-year
liter
liters
litre
litres
long ton
long tons
ly
m
m2
m3
mB
mJ
mK
mL
mN
mPa
mTorr
mW
mb
mbar
md
mebibit
mebibits
mebibyte
mebibytes
megabar
megabars
megabit
megabits
megabyte
megabytes
megagram
megagrams
megajoule
megajoules
megakelvin
megaliter
megaliters
megalitre
megalitres
megameter
megameters
megametre
megametres
meganewton
megapascal
megapond
megasecond
megawatt
megawatts
meter
meters
metre
metres
metric
metric ton
mg
mi
mi2
mi3
microbar
microbars
microbit
microbits
microbyte
microbytes
microgram
micrograms
microjoule
microliter
microlitre
micrometer
micrometre
microwatt
microwatts
mile
miles
millennia
millennium
millibar
millibars
millibit
millibits
millibyte
millibytes
milliday
millidays
milligram
milligrams
millijoule
milliliter
millilitre
millimeter
millimetre
millitorr
milliwatt
milliwatts
min
minute
minutes
mi²
mi³
ml
mm
mm2
mm3
mm²
mm³
mo
moment
moments
month
months
ms
m²
m³
nB
nJ
nK
nL
nN
nPa
nW
nanobar
nanobars
nanobit
nanobits
nanobyte
nanobytes
nanogram
nanograms
nanojoule
nanojoules
nanokelvin
nanoliter
nanoliters
nanolitre
nanolitres
nanometer
nanometers
nanometre
nanometres
nanonewton
nanopascal
nanosecond
nanowatt
nanowatts
nb
nbar
newton
newtons
ng
nibble
nibbles
nl
nm
nm2
nm3
nmi
nm²
nm³
ns
octect
octects
ounce
ounces
oz
oz. fl.
p
pB
pJ
pK
pL
pN
pPa
pW
pascal
pascals
pb
pbar
pc
pdl
pebibit
pebibits
pebibyte
pebibytes
petabar
petabars
petabit
petabits
petabyte
petabytes
petagram
petagrams
petajoule
petajoules
petakelvin
petaliter
petaliters
petalitre
petalitres
petameter
petameters
petametre
petametres
petanewton
petapascal
petasecond
petawatt
petawatts
pg
pica
picas
picobar
picobars
picobit
picobits
picobyte
picobytes
picogram
picograms
picojoule
picojoules
picokelvin
picoliter
picoliters
picolitre
picolitres
picometer
picometers
picometre
picometres
piconewton
picopascal
picosecond
picowatt
picowatts
pint
pints
pk
pl
pm
pm2
pm3
pm²
pm³
point
points
pound
poundal
poundals
pounds
ps
psi
pt
q
qt
quart
quarts
r
rad
radian
radians
rads
rankine
s
second
seconds
semioctet
semioctets
shake
shakes
short ton
short tons
sq ft
sq in
sq mi
sq yd
st
stere
steres
stone
stones
svedberg
svedbergs
tablespoon
tbsp
teaspoon
teaspoons
tebibit
tebibits
tebibyte
tebibytes
terabar
terabars
terabit
terabits
terabyte
terabytes
teragram
teragrams
terajoule
terajoules
terakelvin
teraliter
teraliters
teralitre
teralitres
terameter
terameters
terametre
terametres
teranewton
μN
μPa
μW
μb
μbar
μg
μl
μm
μm2
μm3
μm²
μm³
μs

Examples:

Numeric Output Converting Millimeters to Meters

<div class="lux-num-value" data-var-name="test" data-source-units="mm" data-display-units="m">
</div>

Numeric Input Converting Fahrenheit to Celsius

<input class="lux-num-value" data-var-name="test" data-source-units="F" data-display-units="C">
</input>

Unit Per Unit

<div class="lux-num-value" data-var-name="test" data-source-units="mm/s" data-display-units="ft/min">
</div>

Underlying library reference: https://convert.js.org/

Text Fields

HTML elements bound to textual machine values will be updated any time they are visible. If the machine value is bound to an input, it will be written any time the input value changes.

Class name: lux-text-value