0,0 mL0 mga 20 mg/mL
Ejemplo de cálculo, no sustituye la pauta médica
Dose input with graduated syringe
Enter the weight and the dose per kilo and a graduated syringe fills with the resulting millilitres, with a warning if they don't fit.
Settings
Code
<div class="uvq06-sy"><div class="rw"><label class="fd"><span>Weight</span><span class="ip"><input type="number" inputmode="decimal" min="1" max="150" step="0.5" data-k="w"><em>kg</em></span></label><label class="fd"><span>Dose</span><span class="ip"><input type="number" inputmode="decimal" min="0.5" max="50" step="0.5" data-k="d"><em>mg/kg</em></span></label></div><div class="sx" aria-hidden="true"><span class="nd"></span><span class="hb"></span><span class="br"><i class="lq"></i><i class="tk m" style="--k:0"><b>0</b></i><i class="tk" style="--k:1"></i><i class="tk m" style="--k:2"></i><i class="tk" style="--k:3"></i><i class="tk m" style="--k:4"><b>2</b></i><i class="tk" style="--k:5"></i><i class="tk m" style="--k:6"></i><i class="tk" style="--k:7"></i><i class="tk m" style="--k:8"><b>4</b></i><i class="tk" style="--k:9"></i><i class="tk m" style="--k:10"></i><i class="tk" style="--k:11"></i><i class="tk m" style="--k:12"><b>6</b></i><i class="tk" style="--k:13"></i><i class="tk m" style="--k:14"></i><i class="tk" style="--k:15"></i><i class="tk m" style="--k:16"><b>8</b></i><i class="tk" style="--k:17"></i><i class="tk m" style="--k:18"></i><i class="tk" style="--k:19"></i><i class="tk m" style="--k:20"><b>10</b></i><span class="rd"><i></i></span></span></div><p class="out" aria-live="polite"><b>0,0 mL</b><span class="mg">0 mg</span><span class="cn">at 20 mg/mL</span></p><p class="nt">Example calculation, not a substitute for medical advice</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Two number inputs, body weight and dose in milligrams per kilo, feed a small calculation shown on a graduated 10 mL syringe drawn in CSS. The plunger pulls back and the liquid grows to the result through a registered custom property, so the movement is smooth, and the total in milligrams and millilitres updates live. Over the barrel's capacity it turns red.
Change the concentration and capacity constants in the script for your own case, and keep the note that it is only an example. It fits veterinary and clinical training tools, pharmacy demos and science classes, with the main color for the result and the second for the liquid.