Fader meter change color depending on value


is it possible to color the meter (of a fader type object) depending on it’s value ?
e.g range is from 0-1
0 - 0.9 -> green
0.9 - 0.95 yellow
0.95 - 1 red

is this doable with css? anyone has done this ?

You can set the color property as follows:


var val = @{this}

if (val < 0.9) {
  return "lime" // brighter than "green"
} else if (val < 0.95) {
  return "yellow"
} else {
  return "red"


thanks jean-emmanuel for your reply,
but for reasons i could not figure out yet, it does not work like expected.
in the console i can see the received value : e.g.: /track/1/vu , args: 0.45656565
(coming from reaper)the JS part seems to evaluate to the range value of the fader (when clicking on the colour property @{this} refers to the position of the fader, thus said in this case it is a value between 0 and 1) -> what i wanted to achieve was coloring the meter depending on its input value, not the fader position(instead of @{this} i can use OSC{xxx} i guess).

Even if i change the value or colors i just can get one color(the default) in the fader-meter… what has changed was the color of the fader(and its “drive”) itself, its black (instead of the default blueish)…

update: now the meter has a red color, but just red, no change of color depending on the value…

Sorry, I didn’t read you right and missed the fact you wanted to apply it to the built-in meter. Built-in meters are not very handy to customize, you’d better build your own fader + meter strip to achieve what you want.

thanks, just to understand this right i tried to color a strip(containing this fader), with this syntax using the input value with OSC{} command, when clicking on the color property the value changes like expected, but the color is not applied.
Further i noticed that changing the color to “red” works like expected, but when deleting the color it changes to black (not visible, channel 1)…

Tried this too with a new fader, then it works(in the fireface tab) ???
redesign_v9.json (219.6 KB) redesign_v9.json (219.6 KB) teststate_redesign_1.json (2.7 KB)

Given the layout you’re trying to build I strongly encourage you to follow the ardour.json example session. It’s way easier to do what you want when not using built-in meters. Here are some key points in this session (“mixer” tab):

  • the audio strip container is defined only once, with faders and meters as separate widgets (this way you can apply the 1st answer I gave you)
  • all widgets in the strip use @{parent.variables.n} in the properties that should be unique for each strips (id, address, etc)
  • the audio strips (apart from the 1st one) are clone widgets that duplicate the original strip with just 2 differences (overrides set in the props property)
    variables.n is incremented
    id is incremented

thanks for your comments, i have to take care everything is unique.
I started from scratch and made a seperate meter, but that does not work…
can you tell me why ?redesign_v10.json (76.9 KB)

There are errors in your javascript line, you can see them by opening the dev tools (F12):

JS{{var val = @{this} if (val < 0.5) {return "lime" } else if (val < 0.9) return "yellow" } else { return "red" }}}

One-liners are harder to read and prone to error, in this case there is a semi-colon (or a line break) missing after @{this}, and an opening bracket missing after (val < 0.9).

Copy pasting the code I gave you works however.