Shape-Based
Rotary knob
A hi-fi volume knob you turn in place; the LED halo fills and a tone rises with it.
Shape-Based · Original concept
Type Rail
The word is the track. Letters bulge and fill as the thumb passes over them.
Free codeMIT licenceKeyboard accessible
How to play
Drag along the word; the letters swell under the thumb.
Keyboard
Tab to the slider, then ← → to step, PgUp PgDn to jump, Home End for the ends.
Under the surface
A native range input is the real control: it owns the value, the keyboard and what screen readers hear. Everything you see is drawn from it.
What it needs
No libraries, just HTML, CSS and JavaScript
The concept
What Type Rail really is.
The word is the track. Letters swell and fill with colour as the thumb passes over them, so typography itself is the readout.
Where to use it
5 real-world places this slider fits, from product UIs to marketing pages.
- 01
Brand landing pages
A hero interaction built from the brand name.
- 02
Typography and font sites
Showing a variable font's weight axis.
- 03
Reading progress
A headline that fills as you read the article.
- 04
Event pages
Countdowns or ticket tiers spelled out in type.
- 05
Agency portfolios
A signature typographic interaction.
Implementation
The source, ready to copy.
Two files and a small shared scaffold. Copy them, or take the whole package.
Loading slider.js…
Plain HTML, CSS and JavaScript · no build step · MIT licenceThe ZIP adds a standalone demo page, a React wrapper and the licence file
Work with Codevibe
Like the Type Rail? We can build it for you.
If this design fits your product, we are happy to adapt it to your brand, or design something new that feels just as good to use. The same team that made this library builds websites, apps and product UIs that people enjoy using.
- Custom interactions designed around your brand and your users, not a template.
- Built properly: fast, responsive and accessible, like every slider here.
- From one component to a full product: websites, web apps, mobile apps and design systems.
Just want this slider? Download the code free, no form needed.
More sliders
All 39 sliders →Shape-Based
Thermostat ring
A bead travels 270 degrees around a ring; the centre number and the colour run from cold to warm.
// LET'S BUILD SOMETHING
Ready to build?
Tell us what you are working on. We will respond within 12 hours on working days with an honest assessment and a recommended path forward.
hello@codevibe.in · +91 70677 09224 · Gurugram, India