Material & Visual Effect
Gooey ink
Ink on wet paper. An SVG blur and colour-matrix filter makes the thumb and its tooltip one liquid.
Material & Visual Effect
Cell Bar
A battery of cells on a native range. Whole cells light, the active cell pulses, low values turn red. Skins: battery, volume bars, named stops.
Free codeMIT licenceKeyboard accessible
How to play
Drag; whole cells light up one by one.
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 Cell Bar really is.
A value shown in whole steps, like battery cells or signal bars. Each step lights a full cell, low values turn red, and it can animate a charging state.
Where to use it
5 real-world places this slider fits, from product UIs to marketing pages.
- 01
Device and IoT dashboards
Battery level, charge limits and power-saving thresholds for EVs, phones and sensors.
- 02
Size pickers
Clothing or portion sizes (XS–XL, small–large) in e-commerce and food ordering.
- 03
Rating inputs
Spice level, difficulty or intensity selectors that read in whole steps.
- 04
Network tools
Signal strength, quality presets or bandwidth limits.
- 05
Game settings
Graphics quality or difficulty levels shown as filled bars.
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 Cell Bar? 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 →Material & Visual Effect · original
Comet thumb
A comet on a night track. The faster you drag, the longer and brighter the particle tail it leaves behind.
Material & Visual Effect · platform lab
Wavy track
A track drawn with CSS shape() that ripples toward the thumb.
// 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