Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<div id="container"></div>
<form>
  <div id='wrapper'>

    <p>Select which parameter should be controlled by the slider</p>
		<span id='val'>0.8</span>
		
    <input id='slider' type='range' min=0 max=100 value=80 step=1 />

    <input type="radio" id="SChoice" name="choice" value="S" checked>
    <label for="SChoice">S</label>

    <input type="radio" id="VChoice" name="choice" value="V">
    <label for="VChoice">V</label>


  </div>

</form>

CSS

#slider {
  width: 100%;
}


#wrapper {
	border: 1px solid;
	padding: 10px;
	
}

JavaScript

const rgba = []
            .map((b8): number => {
                const c = b8 / 255;
                return c <= 0.03928 ?
                    c / 12.92 :
                    Math.pow((c + 0.055) / 1.055, 2.4);
            });

        // Relative luminance according to the W3C's formula:
        // https://www.w3.org/WAI/GL/wiki/Relative_luminance
        const l = 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];