How to Display Different Images Based on Slider Temperature in Desmos CL?

Questions
1

Hi everyone! I’ve created a thermometer slider in Desmos that returns both Celsius and Fahrenheit values to students in a note component.

Now I’d like to add a feature where a picture automatically appears in the graph depending on the slider’s value — kind of like a visual temperature indicator.

For example:

  • If the slider value is between 0–32°F, I’d like an image of snow to appear
  • If it’s between 50–70°F, then a sun image
  • And other images for different ranges (e.g., rain, wind, heat)

My goal:
To help students connect temperature ranges to real-world weather visuals.

What I’ve tried:
I know images can have their opacity controlled by CL, so I’m guessing I need to set conditions for multiple images using opacity values based on the slider value. But I’m unsure how to do this efficiently with ranges.

What kind of help I need:

  • Best way to control image visibility using CL
  • How to set opacity based on value ranges (e.g., between 32 and 50)
  • Tips on managing multiple images cleanly in a single graph

Would love to see any examples or best practices! Thanks!

2

Not sure the image idea is ideal for this. After all, things can be cold and not snowing, hot and not sunny, etc.

Maybe consider a colour-themed slider to indicate temperature changes? This would be pretty easy to code, without images.

3

That is a wonderful idea!! Thank you

4

If I understand correctly, you can do it all in the graph without CL. You can use conditional statements to set the opacity of the images based on a slider value. Here is an example: slider with picures | Desmos

I also just remembered this example I made a few years ago - it shows how you can adjust various things about images using sliders. Table Sliders • Activity Builder by Desmos Classroom