Early accessBlack Friday: 20% off new projects with Codevibe, plus 20% off Hostinger hosting. Get your codeBlack Friday: 20% off. Get your code
Web DevelopmentScalable web apps, built fastMobile DevelopmentiOS & Android, one codebaseCloud & DevOpsInfrastructure that scalesAI & AutomationProduction-grade AI, measurableUI/UX DesignDesign that convertsSEO & GEOFound on Google and in AI
AboutContact
Book a scoping callhello@codevibe.in+91 70677 09224

Free tool · Slider Library

Sliders can be more than sliders.

Explore a creative collection of interactive sliders. From illustrated worlds and liquid motion to physics-driven controls and immersive 3D experiences. Discover, experiment and get the code to build them yourself.

Explore the collection →How it works

These are just ideas for creative thinking. Take inspiration from them, build your own, and tag us. If you create something extraordinary, we will publish it here with full credit to you.

codevibe-technology@codevibe_technology@codevibe_incodevibe-technology
  • 39Interactive sliders
  • 9Families
  • 100%Free source code
Reacting face
Rotary knob
Gooey ink
01

What makes this library different

Worlds, not widgets

Every slider is a small experience: a sun you drag across the sky, a ratchet that clicks, ink that flows.

02

Accessible underneath

A real native range input is always the control, so the keyboard, touch and screen readers work however strange the surface gets.

03

Free code, no strings

Plain HTML, CSS and JavaScript in its own folder. Download it in one click. No form, no account, no payment.

The collection

Explore every family.

Traditional Value

Lamp dimmer

The baseline every other slider inherits, presented as a lamp dimmer: one native range, a filled track, a value tooltip.

Drag the thumb to dim the lampExplore Lamp dimmer →
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.

Grab the number and drag it; click it to type; Shift and Alt change the stepExplore Naked Number →
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.

Drag; whole cells light up one by oneExplore Cell Bar →
Illustrated

Reacting face

An illustrated face morphs continuously from glum to delighted as the value rises. Emoji skin included.

Drag; the face changes its mind as you goExplore Reacting face →
Shape-Based

Rotary knob

A hi-fi volume knob you turn in place; the LED halo fills and a tone rises with it.

Turn the knob; a halo of LEDs and a soft tone followExplore Rotary knob →
Traditional Value

Dual thumb

Two gold rings on a price rule. Two native inputs, one range, APG multi-thumb semantics.

Drag either ring; the span between them fillsExplore Dual thumb →
Traditional Value

Balance beam

Zero in the middle. The fill grows from the centre and a beam on a pivot tilts with the sign.

Drag from the centre; the beam tiltsExplore Balance beam →
Comparison

Before / after

The comparison everyone knows: a sketch becomes a painting across a divider. Own build with a real native control and ARIA.

Drag the divider left and rightExplore Before / after →
Traditional Value

Frequency dial

A logarithmic scale from 20 Hz to 20 kHz. Equal movements are unequal steps, and a tone lets you hear why.

Drag; hear the pitch and watch the scale compressExplore Frequency dial →
Physics-Based

Elastic overdrag

A rubber band you can over-pull. Past the ends the track squishes and stretches, then springs back when you let go.

Drag past either end; the track stretches and snaps backExplore Elastic overdrag →
Physics-Based

Momentum puck

An air-hockey puck on a rail. Fling it and it coasts with momentum, bounces off the end with a knock, and settles.

Fling the puck; it glides, hits the end and knocksExplore Momentum puck →
Shape-Based

XY pad

Two sliders folded into one plane: drag a point across a colour field to choose hue and brightness together. Two native ranges underneath.

Drag anywhere on the pad to set two values at onceExplore XY pad →
Media

Waveform seek

Seek inside a drawn audio waveform. Played bars light up, hovered bars preview, and a synthesised clip plays from the playhead.

Scrub through the sound; the waveform lights up as you goExplore Waveform seek →
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.

Drag fast; the thumb sheds a tail of sparksExplore Comet thumb →
Comparison · original

Triptych

Three states of one scene side by side: two dividers, three panels, one picture across the seasons.

Drag two dividers to compare three versionsExplore Triptych →

Creative experiments

3D, sensors and the edge of the platform.

WebGL scenes, tilt and pinch, and a Platform Lab of pure-CSS tricks only the newest browsers can do. Each still has a native control underneath and a fallback.

Material & Visual Effect · platform lab

Wavy track

A track drawn with CSS shape() that ripples toward the thumb.

Drag along a track that ripplesExplore Wavy track →

How it works

Play first. Then take it home.

  1. 1

    Explore

    Every card here is a live slider. Drag it, tap it, or Tab to it and use the arrow keys.

  2. 2

    Open the experience

    Each slider has its own page: fullscreen, reset, phone and tablet previews, its own controls and the full source.

  3. 3

    Get the code

    Download the ZIP: HTML, CSS, JavaScript, a React wrapper, dependencies and an MIT licence. Want it built into your product? Talk to us.

Work with Codevibe

Like what you see? We can build it for you.

If you like our design work and want us to build something like this for you, we are happy to do that. 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.

What are you building?

1 / 3

Two taps. A senior engineer, not a salesperson, reads this.

Project
When do you want to start?

NDA on request before detailed scoping. Your details are used only to reply. Privacy

Questions

About the Slider Library

Is the slider code really free?

Yes. Every slider ships with its HTML, CSS and JavaScript under the MIT licence, free for personal and commercial projects. Download the ZIP from any slider page. There is no form, no account and no payment.

Do I need React or a build step?

No. Each slider is plain HTML, CSS and JavaScript in its own folder, with a small shared scaffold. Open the demo page from the ZIP and it runs. A thin React wrapper is included for React and Next.js projects.

Are these sliders accessible?

Every slider uses a real native range input as the control, however unusual the surface looks. Keyboard arrows, Page Up/Down, Home and End work, screen readers hear a meaningful value, and animation respects reduced-motion settings.

Which browsers are supported?

Chrome, Edge, Firefox and Safari. The Platform Lab sliders use the newest CSS features, which today only Chromium supports fully; they show a labelled fallback elsewhere. The 3D sliders need WebGL and fall back to a still image without 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.

Call +91 70677 09224
hello@codevibe.in · +91 70677 09224 · Gurugram, India