Linear Graphical UI Controls with HTML5, SVG and JavaScript

While we usually assume that most numerical form controls are understandable to users, a graphical readout can provide a useful visual correlation and guide, especially when dealing with a wide range of values. Like the previous radial example, this one uses SVG and JavaScript with a range input.

As before, the <svg> element is contained inside a label:

<label for="scale">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 33">
        <title>Scale</title>
            <defs>
                <clipPath id="triangle">
                    <polygon points="0 33, 100 33, 100 0" />
                </clipPath>
            </defs>
        <polygon points="0 33, 100 33, 100 0" />
        <rect x="0" y="0" height="50" width="50" clip-path="url(#triangle)" fill="yellow" />
    </svg>
</label>

The central element of the SVG is a <rect>, which is clipped with triangular <polygon>. The <input> measures a range from 0 to 100: note that this is the same width as the <polygon>; the input’s value is the same as the width of the <rect> element.

<input id="scale" type="range" name="scale" min="0" max="100" 
value="50" oninput="scaleChange()" onchange="scaleChange()">

The CSS

The elements are styled with a few lines of CSS:

label, input { 
  display: block; 
  width: 25%;
  margin: 0 auto;
}
#scale {
  margin-top: 2rem;
}

Behind the triangular SVG polygon is another unstyled triangle; because this one isn’t clipped but otherwise has the same dimensions as the yellow triangle, it acts as a frame or backdrop.

The Script

The input has both a onchange and oninput behaviour that call the same function, to cover all browsers. The function, together with its associated JavaScript:

var scale = document.getElementById("scale"),
svg = document.querySelector("label[for='scale'] svg"),
svgns = "http://www.w3.org/2000/svg",
triangle = svg.getElementsByTagNameNS(svgns, "rect")[0];

function scaleChange() {      
    triangle.setAttribute("width",scale.value);
}

Advanced Exponentials

While the value of a graphical display for a purely linear value might be debatable, the same technique would be particularly useful for non-linear values, such as the exponential function, which are usually poorly understood, as demonstrated in this example at Codepen.

Population Growth Over Time

The first linear example above worked only if the width of the SVG viewBox was exactly the same as the max value of the slider. This is unlikely to be the case in reality. In this example, I’ll read the width of the viewbox and the value of the slider with JavaScript, and compare the two. The markup remains very similar, although I have changed the name and id values for clarity:

<label for="exponentialslider">
    Population Growth Over Time
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 627 350">
        <title>Exponential Growth</title>
            <defs>
                <clipPath id="exp">
                    <path d="M0 350c370-10 521.7 31.7 626.7-350v350H0z"/>
		</clipPath>
	</defs>
	<path d="M0 350c370-10 521.7 31.7 626.7-350v350H0z"/>
            <rect height="350" width="627" clip-path="url(#exp)" fill="yellow" />
        </svg>
</label>
<input id="exponentialslider" type="range" name="exponentialslider" 
    min="0" max="10" value="8" step=".1" 
    oninput="expChange()" onchange="expChange()">
</div>

The script is slightly more involved:

var exponentialslider = document.getElementById("exponentialslider"),
expsvg = document.querySelector("label[for='exponentialslider'] svg"),
expsvgns = "http://www.w3.org/2000/svg",
mask = expsvg.getElementsByTagNameNS(expsvgns, "rect")[0],
box = expsvg.getAttribute('viewBox'),
viewBoxCords = box.split(/\s+|,/),
viewBoxWidth = viewBoxCords[2] - viewBoxCords[0],
sliderMax = exponentialslider.max;

function expChange() {    
    mask.setAttribute("width",exponentialslider.value * (viewBoxWidth / sliderMax));
}

expChange();

We can’t (yet) gain the exact width and height of the viewBox directly from the DOM, but we can grab the viewBox value string, split it into an array, and subtract the first value from the third to get the width.

The expChange function is called once at the very end to set the initial position of the exponential graph.

There are many more possibilities for using this technique: in theory, JavaScript could be used to create the entire SVG structure, automating the whole process.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/mPzbQm