Check out a free preview of the full Dynamic CSS with Custom Properties (aka CSS Variables) course

The "General Linear Range Mapping" Lesson is part of the full, Dynamic CSS with Custom Properties (aka CSS Variables) course featured in this preview video. Here's what you'd learn in this lesson:

Lea discusses a more generalized formula for range mapping, revisits the migraine log with the new generalized formula, and provides the Codepen that inspired the spotlight example. Range mapping allows for one variable to control multiple things.


Transcript from the "General Linear Range Mapping" Lesson

>> There is a more general formula. Right now we've seen how to do range mapping from zero to one. If our range is zero to one, we've seen how to get any range. But there is a more general formula basically, if our range is min x to max x and we want to get min y to max y, we could actually do that.

It's just math. We can essentially solve this the system of these two equations and we can get values for a and b. However, I don't expect you to actually do that. I just wanted to show you that it's there, it's possible. I did make a little app that you could use instead so that you could just input the values you have for example, for the values you have for p and the output values you wanna get and you can modify these numbers and it just updates.

And remember this, this would be much easier to reason about if we had this up when we when we did this migrant demo. So remember what we wanted our variable was intensity. When intensity was 1 we wanted to output. What did we want to output with for 1?

50 I think, and then when intensity was 5, we wanted to add 0. Okay this expects length, so I'm gonna make it names for now. I did push a fix to this but it's not. It hasn't caught up, so we could actually just get this and remove the amps.

So here we had compromise with a different formula because like I said it would have been trickier to figure out the numbers. But with the app, we can actually just get exactly the numbers we want. Since it just gives us the formula and now this goes from 0 to 50 just like we wanted.

It doesn't look as pretty though so we might still wanna stick with the other one. So, range mapping allows the same variable to control multiple things. This can be useful in a number of cases. And I just wanted to give some credit because the spotlight demo was inspired From this code pen which is not mine.

This is a lot fancier

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now