Changin background image dynamically

Dear community,

I've troubles figuring out how to do a very simple thing: upon a slider reaching some values, I would like the background image of a panel to change, between a selection of 10 possible images.

I've been able to make the first step in the CSS section of said panel, like so:


and it works. But as I try to add an "else if" right after, the code doesn't work anymore.

Is there maybe a better way to achieve this?

There should be no issue with adding "else if" statements, maybe there was something off with the syntax ?

JS{

if (@{foo} < 0.1) {
  return "background:lime;"
} else if (@{foo} < 0.5) {
  return "background:orange;"
} else {
  return 'background:red;"
}

}

Dear Jean,

I was indeed wrong and dumb: the problem was the space between "JS" and the curly bracket.

Also as a lesson for newbies like me: check spaces. I guess.
Thank you!