JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


An SVG thermometer for jQuery that provides programmatic control of the temperature.

You can see demos of its functionality at my website:


You can install via bower:

bower install jquery.thermometer --save


The thermometer is a jQuery plugin that turns any div into an SVG thermometer. Simply create the fixture on your page and then turn it into a jQuery object by calling the thermometer() method.

<div id="fixture"></div>




Option Values Description Default
height Integer Sets the height of the thermometer in pixels. 700
minValue Decimal Sets the minimum temperature 0
maxValue Decimal Sets the maximum temperature 8
startValue Decimal Sets the initial temperature of the thermometer 0
topText String The text at the top of the temperature scale "8"
bottomText String The text at the bottom of the temperature scale "0"
textColour String The colour of the text on the temperature scale #000000
tickColour String The colour of the ticks on the temperature scale #000000
liquidColour #dddddd or fn Colour of the liquid or fn to return colour #ff0000
animationSpeed Integer Time in milliseconds for the liquid to move 1000
pathToSVG String If you need to store the SVG in another place "svg/thermo-bottom.svg"
valueChanged fn Callback for when the temperature has changed undefined
onLoad fn Callback for when the widget has fully loaded undefined

To set the options simply pass them in as an object to the constructor:

$('#fixture').thermometer( {
     minValue: 0,
     maxValue: 100,
     liquidColour: '#aa00bb'
} );


setValue( value )

Use jq.thermometer( 'setValue', newValue ) to set the temperature of the thermometer. If the new value is outside of the range of the thermometer, it will be clipped or capped.

setLiquidColour( newColour )

If you want to set the liquid colour directly, you can call setLiquidColour to update the colour of the liquid. The value must be a string in this format: "#hhhhhh" where h is a hex value. It must be the 6-digit form of the CSS colour code (this is due to the colour blending function in use).