Interactive Key Slider

Interactive Key Slider


Learn how Harmonious compactly displays the relationships between chords in all of the keys, and how to quickly see keyboard or fretboard chord forms with just a tap or a flick sideways.

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.

animation showing top pane switching between the keys of C Major, F Major, back to C Major, then to G Major, looping forever

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.

animation showing top pane swapping between C major and C minor when the triangle moves between the two

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.

animation showing how to navigate to learn how to play a certain triad and seventh (on keyboard and guitar) and the related mode for extensions

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.

animation showing bottom pane swapping between C min + C min Maj 7 + extensions and C min + C min 7 + extensions

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.