Tanks similar to the sliders, let users select a value within a range.

Tanks are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.

Tanks have controllable fill area that can be adjusted to the desired level.

Continuous tank

Use continuous tanks for subjective settings that do not require a specific value for the user to make meaningful adjustments.

Discrete tank

Use for objective settings that require specific values for the user to make meaningful adjustments. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable.

The thumb label can re positioned on the near or the far side of the tank using the thumbLabelPosition property.


Smart.Tank with a scale.

Continuous tanks with scale positions: near, track and far


Smart.Tank can be horizontal or vertical depending on the orientation property.

By the default the tank is vertically oriented. The property "orientation" determines the orientation.

Horizontal tank, thumbLabelPosition near / Horizontal inverted tank, thumbLabelPosition far

Horizontal tank with a near positioned scale, thumbLabelPosition near / Horizontal inverted tank with a far position scale, thumbLabelPosition far


Tanks are controls that are used for adjusting values precisely.

Can be used as readonly displays that indicate the current processor usage or as battery controls.


CPU Usage 0 %

Battery Saver Mode

Power saver mode active on 80%