Media
Film-strip seek bar
A strip of drawn frames with a playhead. Played, buffered and hovered ranges on one native input, with a frame preview.
Media
Waveform seek
Seek inside a drawn audio waveform. Played bars light up, hovered bars preview, and a synthesised clip plays from the playhead.
Free codeMIT licenceKeyboard accessible
How to play
Scrub through the sound; the waveform lights up as you go.
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
Uses Web Audio
The concept
What Waveform seek really is.
Seek inside a drawn audio waveform: played bars light up, hovered bars preview, and a generated clip plays from the playhead.
Where to use it
5 real-world places this slider fits, from product UIs to marketing pages.
- 01
Podcast and music players
Waveform scrubbing on episode and track pages.
- 02
Voice notes and calls
Playback of recorded messages in chat apps.
- 03
Audio editors
Selecting and trimming audio regions.
- 04
Transcription tools
Jumping to a moment in a recording.
- 05
Music marketplaces
Previewing beats and samples.
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 Waveform seek? 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 →Traditional Value
Lamp dimmer
The baseline every other slider inherits, presented as a lamp dimmer: one native range, a filled track, a value tooltip.
Experimental · original
Naked Number
No thumb: the number itself is the handle. Digits roll like an odometer, it stretches with speed, and you can type into it.
// 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