Home

A JavaScript Linear Interpolation Map Range Function Thing

October 2025

Introduction

I'm working on a project for Weird Web October1 that maps oklch2 color values to unicode3 characters. Here's how it'll work:

  • There are 297,334 unicode characters in the current set.
  • I'm using the Hue value from oklch for the color (where 'l', 'c', 'h' stands for Lightness, Chroma, Hue). Those values go from 0 to 360.
  • There will be an input range slider that lets you scrub through the characters/colors.
  • When the slider is all the way down, I want the output to be unicode character 0 with a Hue value of 0.
  • When the slider is all the way up, I want the unicode character to be number 297,334 and the Hue to be 360.

The Function

I need a function that gives me two values from different ranges from a single slider. I found a page4 with the core of what I need. It lets you solve the equation a few different ways. I don't need that so I parsed it down to this function:

JavaScript
function mapRange(currentValue, xMin, xMax, yMin, yMax) {
  return (
      (xMax - currentValue) 
      * yMin 
      + (currentValue - xMin) 
      * yMax
    ) / (xMax - xMin);
}

Example Code

Here it is in action.

Output

Hue Value:
Unicode Value:

HTML

<bitty-2-0 data-connect="LinCalc" data-send="init">
  <div>
    <label>Input: 
      <input 
        data-receive="init" 
        data-send="hueValue|unicodeValue" 
        type="range" 
        min="0" 
        max="360" 
        step="0.1" />
    </label>
  </div>
  <div>
    Hue Value: 
    <span data-receive="hueValue"></span>
  </div>
  <div>
    Unicode Value: 
    <span data-receive="unicodeValue"></span>
  </div>
</bitty-2-0>
JavaScript
window.LinCalc = class {
  init(_event, el) {
    el.value = 0;
  }

  hueValue(event, el) {
    el.innerHTML = event.target.value;
  }

  unicodeValue(event, el) {
    const currentValue = parseFloat(
      event.target.value
    );
    const xMin = 0;
    const xMax = 360;
    const yMin = 0;
    const yMax = 297334;
    const outValue = mapRange(
      currentValue, xMin, xMax, yMin, yMax
    );
    el.innerHTML = Math.floor(outValue);
  }
}

Got It

I could have used this function a few times already. There's only so much energy in a day though. I never had enough to dig into it.

I've got it now. It's in the toolbox. Ready to play around with.

-a

end of line

Endnotes

Thanks to Nils for helping point me in the right direction.

References

I'm using bitty to wire the range slider input up to the output. It's not required for the math to work. The mapRange() function stands on its own.

Footnotes

1 ⤴

My home page for Weird Web October. Today is the 15th of the month. I almost dropped out a couple days ago, but didn't. Now that I'm half way through I feel like I can make the rest of the month.

2 ⤴

The awesome color space that makes more sense than rgb.

(Turns out that working with colors on computers gets complicated as all hell. See the MDN Color Space article for an example.)

3 ⤴

Basically, this is how computers turn the letters and characters we humans understand into a bunch of 1s and 0s they use internally.

4 ⤴

Love little pages like this. A single purpose page with just the form on it. (Or, you know, a collection of tools like I keep at tools.alanwsmith.com)