How to Use the Interactive Key Slider Widget
The interactive key slider widget at the end of each key page compactly shows all the chords in the major and minor keys for each root note in the twelve keys of the circle of fifths, summarizing the material on each key page, while allowing quick access to all keys, without the need to navigate back and forth between key pages.
The top half of the widget shows all of the chords and Roman numeral functions for the current key. Swipe sideways, click-and-drag sideways, or scroll to navigate through keys and chords, ordered by the circle of fifths. This transposes all chords in the triangle lattice up or down by one fifth.
Tap any triangle to select a different chord root and function. Swiping sideways will leave the triangle in the same place, maintaining the function but changing the chord root for that triangle, as the key changes.
The bottom half of the widget shows which key is selected and tapping on the name of the key will navigate to it. The top two rows of the triangle area show major key function, and the bottom two rows show minor key function.
The bottom half shows the details of the chords—which triad, which seventh chord, which mode and chord extensions constitute that Roman numeral function, with links to pages about those chords, or how to play them on a keyboard or a guitar in E standard tuning.
Selecting certain triangles may show multiple chord functions in the bottom half (when two or more page dots are present), and simply swiping left and right between pages will reveal these different functions and their chords.
The triangle lattice is based on the Tonnetz of the eighteenth-century genius polymath Leonhard Euler. (The Tonnetz has some shortcomings, for example certain triads with shorter voice-leadings are further away in the diagram than others with longer voice leadings.) His tone-network shows some relationships between major and minor triads where up triangles are major triads (chord names shown with capital letters), and down triangles are minor triads (shown in lowercase). (See the section Diatonic Circle of Thirds at the end of Diatonic Modes & Chords for more on this.)
The interactive slider extends this idea to sevenths that share three notes with a triad of the same root, so capital letters can be major or dominant sevenths, and lowercase letters can be minor or diminished chords. Navigating in another dimension (swiping to scroll “into” and “out of” the page) turns Euler’s original two-torus into a three-torus/lattice.
But you don’t need to know all of the mathematics to see that for many pieces of music, if you navigate to the right key, the handful of chords likely to be used in the piece are all within reach, with just a few taps or clicks and maybe a key change or two, a few swipes, to see all chords.
Finally, the chords within a key are related spatially the same way in all keys. For example, G Dom 7 is related to C Maj exactly the way C Dom 7 is to F Maj, that is, the V chord (dominant seventh chord in this case) tonicizes and resolves to the I chord (tonic major triad) to its right. This can be seen by simply swiping back and forth between the Key of C Major and the Key of F Major.