Celsius and Fahrenheit temperature input
A glass thermometer that rises and shifts from cold to warm with the value; switching units converts the number for you.
Settings
Code
<div class="uvq06-tp"><div class="th" aria-hidden="true"><span class="tb"><i class="hg"></i></span><span class="bu"></span></div><div class="sd"><label for="uvq06-tp-in" class="lb">Temperature</label><div class="fd"><input id="uvq06-tp-in" type="number" inputmode="decimal" step="0.5"><span class="un">°C</span></div><div class="sg" role="radiogroup" aria-label="Unit"><label><input type="radio" name="uvq06-tp-u" value="c"><span>°C</span></label><label><input type="radio" name="uvq06-tp-u" value="f"><span>°F</span></label><i aria-hidden="true"></i></div><p class="fl" aria-live="polite"></p></div></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
A number input for temperatures with a glass thermometer beside it. The mercury height and its color both come from one CSS variable, mixing the cold and warm colors as the value climbs, and a short label describes how it feels. A segmented control swaps between Celsius and Fahrenheit, converting the value with a quick roll.
Set the warm color as the main color and the cold one as the second. It fits weather widgets, smart home panels, cooking apps and lab forms, and the feeling labels in the script can become ranges for ovens, fridges or aquariums.