# Meter A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too. Kit part · Free · https://tactileui.dev/parts/meter - Element: `` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Progress - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### A good end that is low · storage ```html

Storage used 31 GB Plenty free

31 GB

``` ### A good end that is high · a score ```html

Health score 58 points Fair

58 points

``` ### A good end in the middle · temperature ```html

Cabinet temperature 26 °C Warm

26 °C

``` ### No marks · --bare, with --lg ```html

Storage used 91 GB Nearly full

91 GB

``` ### No thresholds · all optimum ```html

Profile complete 64 %

64 %

``` ### Fewer segments · --n ```html

Storage used 60 GB Getting full

60 GB

Storage used 72 GB Getting full

72 GB

``` ```js import { setMeter, meterState } from '/kit/kit.mjs'; // Sets the native value, the lamp, the state's words and fires tui-meter-change. setMeter(document.querySelector('.tui-meter'), 91); meterState(91, { min: 0, max: 100, low: 50, high: 85, optimum: 20 }); // 'poor' meterState(72, { min: 0, max: 100, low: 50, high: 85, optimum: 20 }); // 'fair' ``` The demo on the page: ```html

Node 4 · Lode

Storage used 72 of 100 GB Getting full

72 GB

Getting full: 72 of 100 GB used

``` ## Usage notes Move the fader: the lit length grows, and where it crosses the cut lines it changes colour as a whole and the words beside it change too. The cut lines are the low and the high, printed under the strip. Below the demo the same strip is shown with its good end at the top, and with it in the middle. ## Accessibility - The strip is a native `` with a real ``, so a screen reader says “Storage used, meter, 72 of 100”, with the range and the value, and no ARIA is needed. - The state is said in words next to the strip (“Getting full”) with a lamp that agrees; the lit length changing colour is never the only sign. The marks and the cut lines are decoration for the eye and are hidden, since the thresholds are in the meter itself. - The words are the secondary ink, at least 4.5:1 on the plate, and the strip is a dark window whose edge is seen at 3:1 in every finish. - It takes no focus. The lit length eases for 120ms when it changes; under reduced motion it does not, and every figure is the same. - On a phone the strip and the marks scale to the width and the first and last marks stay on the plate, so there is no sideways scroll at 390px. ## How it’s built It is the ladder’s dark glass with the opposite idea in it. The ladder paints its segments by position, green then amber then red along its length, so it shows how far up a scale something is. The meter paints the whole lit length one colour, chosen by the native meter from low, high and optimum, so it shows whether the value is good: the same 40 on a strip whose good end is high is red and on one whose good end is low is green. The cut lines and printed marks are drawn from two custom properties, and the segment gaps are laid over the browser’s own bar. ## Rules Show where a value stands between a low and a high that matter: storage used, a score, a cabinet’s temperature, with the thresholds printed under the strip. The full rules are in `meter.rules.md` in the brain, which ships with the Kit. ## Related parts - [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read. - [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar. - [Battery](https://tactileui.dev/parts/battery): A cell outline with a terminal at one end, filled with lamp segments set into a recess, lit from the empty end. The lit segments are one lamp colour for the whole cell: green, amber below two fifths, red below a fifth. While it charges, the top lit segment breathes. The level is said in words too, so neither the colour nor the breathing is the only sign. - [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.