Live preview Sliders
Bloom Vapor Slider
A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.
Sliders — 100 CSS effects
Range input designs with custom tracks, thumbs, and fills.
Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.
Page 1 of 2
Sliders effects
Live preview Sliders
Canyon RGB Channels
Three stacked channel rails mix a colour the way a canyon wall layers its bands.
Live preview Sliders
Valve Thermostat Lever
A raked steel cursor rides a recessed slot between an eco stop and a boost stop, under a lit readout.
Live preview Sliders
Amber Glow Slider
A dim ember rail runs beneath a knob that breathes its own pulsing amber halo.
Live preview Sliders
Anvil Type Size
A live specimen line grows from small to display size the moment the control is engaged.
Live preview Sliders
Bearing Detent Percent
Four notches cut the rail into quarter stops and a polished ball bearing snaps between them.
Live preview Sliders
Caliper Brake Bias
A vented brake-disc rail with a red centre detent and a clamp-shaped handle splitting bias.
Live preview Sliders
Coil Mono Slider
Pure black and pure white only: the filled span is wound with a tight diagonal coil.
Live preview Sliders
Cove Circular Frame
A round instrument bezel with a slowly turning dashed ring around the inner rail.
Live preview Sliders
Dynamo Decibel Meter
A segmented LED ladder runs green to red above a rail scaled in decibels down to silence.
Live preview Sliders
Meadow Star Rating
A five-step rating rail whose amber fill stops exactly where the lit stars above run out.
Live preview Sliders
Quartz Gradient Slider
A prismatic quartz rail runs the full spectrum under a bezelled white knob.
Live preview Sliders
Willow Chunky Slider
An oversized touch target with a thick channel and a knob the size of a fingertip.
Live preview Sliders
Arc Memphis Slider
Confetti dots, a tilted label chip and a beam of bars frame a candy coloured control.
Live preview Sliders
Basalt Square Slider
Hard-cut square handle on a heavy basalt bar with no rounded corners.
Live preview Sliders
Chassis Steering Feel
A CSS steering wheel turns as the pointer arrives while the rail sets lock-to-lock travel.
Live preview Sliders
Copper Diamond Slider
A tilted copper lozenge glides on a thin wire and opens up when hovered.
Live preview Sliders
Cusp Split Slider
The card, the rail and even the handle are cut in half between a cool and a warm side.
Live preview Sliders
Gleam Zigzag Slider
Saw toothed yellow teeth form the rail while a diagonal gleam wipes across the panel.
Live preview Sliders
Mica Dotted Slider
A row of mica flecks forms the rail while a glass lens slides over them.
Live preview Sliders
Nickel Industrial Slider
A heavy knurled nickel grip sits in a bevelled channel like a workshop control.
Live preview Sliders
Pulse Brutal Slider
Raw brutalist panel with a four pixel ink frame, hard offset shadow and a flashing status tag.
Live preview Sliders
Pylon Shadow Depth
A standing block casts a shadow that keeps stretching and pulling back over its floor.
Live preview Sliders
Shaft Minute Timer
A ticking CSS clock face sits beside a rail that dials the countdown in five minute steps.
Live preview Sliders
Spiral Mist Slider
Two blurred conic clouds breathe behind the rail and leave a soft aura around the knob.
Live preview Sliders
Sway Zen Slider
Washi paper, one vermilion stroke and a single ink hairline with a lone red disc on it.
Live preview Sliders
Verge Toon Slider
Fat ink outlines, flat candy fills and a speech bubble tag give a comic panel feel.
Live preview Sliders
Wisp Sparkle Slider
Four point sparkles twinkle out of turn around a violet rail set on a deep night plate.
Live preview Sliders
Aurora Equalizer Bank
Five vertical faders stand side by side over an aurora-tinted channel bank.
Live preview Sliders
Brass Groove Slider
A deep machined groove holds a polished brass bead between end caps.
Live preview Sliders
Cascade Contrast Slider
A high contrast build with black on white shapes and a thick yellow focus outline.
Live preview Sliders
Chalk Dashed Slider
A dashed chalk line stands in for the rail under a soft powdery handle.
Live preview Sliders
Circuit Mixer Strip
A single mixing-desk channel strip with a name plate, gain scale and grooved fader cap.
Live preview Sliders
Cobalt Focus Slider
Keyboard focus expands a cobalt halo around the handle instead of a flat outline.
Live preview Sliders
Conduit Fuel Gauge
A fuel rail whose green fill buries the red reserve band as the tank climbs, with a range estimate above.
Live preview Sliders
Coral Press Slider
Holding the handle squashes it into the rail and the whole card sinks with it.
Live preview Sliders
Dash Paper Slider
Kraft cardboard with a fibre grain, a strip of masking tape and a stamped dashed frame.
Live preview Sliders
Delta Balance Slider
A stereo balance control whose rail fades outward from a centre detent mark.
Live preview Sliders
Drift Leak Slider
A warm film light leak keeps sweeping over the panel in screen blend while the knob glows.
Live preview Sliders
Dune Curve Slider
Layered shading bows a perfectly flat rail into what reads as a rounded dune crest.
Live preview Sliders
Echo Board Slider
Solder mask green with silkscreen text, a gold trace rail and four through hole pads.
Live preview Sliders
Ember Spark Slider
The handle carries a spark glyph drawn from background bars and flickers as it burns.
Live preview Sliders
Fjord Zoom Control
A zoom rail flanked by minus and plus glyphs drawn purely from background bars.
Live preview Sliders
Flange Pressure Lever
A conic gauge face reads the regulator while the rail marks its own red zone near the top.
Live preview Sliders
Flint Triangle Slider
A clipped flint arrowhead points down at the rail like a ruler marker.
Live preview Sliders
Flux Holo Slider
An iridescent film keeps drifting through the rail and the sample strip above it.
Live preview Sliders
Forge Log Scale
Evenly spaced decades give a logarithmic frequency feel under a glowing ember readout.
Live preview Sliders
Frost Track Slider
A hairline icy rail carries a glowing round knob that swells under the pointer.
Live preview Sliders
Garnet Scale Slider
A numbered measuring scale sits above a slim rail marked by a glowing garnet blade.
Live preview Sliders
Gasket Opacity Checker
A checkerboard bed shows through a plate whose alpha keeps breathing up and back down.
Live preview Sliders
Gear Ratio Selector
A toothed rail carries a hex-nut handle across eight final-drive ratios listed underneath.
Live preview Sliders
Girder Quality Tier
An I-beam rail with a bolted block handle steps between three labelled render tiers.
Live preview Sliders
Glacier Speed Control
Playback speed between a single slow bar and a stack of accelerating speed lines.
Live preview Sliders
Glide Glass Slider
A frosted plate floats over a blurred colour orb and carries a translucent rail across it.
Live preview Sliders
Granite Ticks Slider
Five discrete stops backed by a datalist, with tick marks drawn under the rail.
Live preview Sliders
Halo Border Slider
The card border and the knob ring are both painted by the same four stop gradient.
Live preview Sliders
Harbor Budget Slider
A budget picker with a large currency readout above and hard limits printed below.
Live preview Sliders
Hush Wire Slider
Everything is one pixel wide: the frame, the rail, the tick comb and the open ring handle.
Live preview Sliders
Ivory Minimal Slider
One hairline rule, one tiny ivory dot and a monospaced readout — nothing else.
Live preview Sliders
Jade Vertical Fader
A vertical mixing fader built with writing-mode, filling upward from the bottom.
Live preview Sliders
Kiln Thermometer Tube
A glass column with a glowing bulb below it stands in for the handle of a kiln thermometer.
Live preview Sliders
Kindle Trail Slider
A single ember keeps running along a dotted fuse line that sits under the thin amber rail.
Live preview Sliders
Lagoon Paired Sliders
Two colour coded controls sit shoulder to shoulder in one card, split by a thin divider.
Live preview Sliders
Lapis Brightness Slider
A brightness rail brightening from night blue to daylight between two markers.
Live preview Sliders
Lattice Line Height
Ruled baseline guides sit behind a paragraph whose leading opens up while focus is inside.
Live preview Sliders
Lever Loop Range
A bar waveform sits above a raked lever that picks how many bars the loop repeats for.
Live preview Sliders
Lull Halftone Slider
A print style dot screen fills the open rail and fades out across the plate above it.
Live preview Sliders
Marble Ring Slider
A hollow marble ring floats over a shallow channel and shows the rail through it.
Live preview Sliders
Mesa Endcap Slider
A small block and a large block bookend the rail to signal the minimum and maximum.
Live preview Sliders
Monsoon Notched Grip
Three cut notches score the grip while slanted rain streaks drift across the rail.
Live preview Sliders
Oasis Saturation Slider
A washed-out swatch strip floods back to full colour while the control is engaged.
Live preview Sliders
Obsidian Dual Range
Two stacked inputs share one rail so a min and a max handle bracket a span.
Live preview Sliders
Onyx Accent Slider
The native control kept intact and recoloured with a single accent-color line.
Live preview Sliders
Opal Bubble Slider
A pointed value bubble lifts above the rail whenever the control is touched.
Live preview Sliders
Orbit Neumorph Slider
A pale putty panel where a moon knob rides a pressed groove that fills in behind it.
Live preview Sliders
Pearl Volume Slider
A speaker glyph drawn in CSS sits beside the rail with a numeric readout.
Live preview Sliders
Piston Amp Panel
A gold amplifier faceplate with an engraved gain legend sitting above a woven speaker grille.
Live preview Sliders
Prairie Zone Slider
The rail is banded into low, mid and high zones with a matching legend underneath.
Live preview Sliders
Quiver Wave Slider
The rail is a chain of alternating arcs forming a sine wave that keeps drifting sideways.
Live preview Sliders
Ratchet Shift Selector
A machined gate slot with six detented positions and a weighted shift-knob handle.
Live preview Sliders
Reef Neomorphic Slider
A soft-UI control where the channel is pressed inward and the knob swells outward.
Live preview Sliders
Ridge Year Picker
A year selector stepping one year at a time above a ruled decade scale.
Live preview Sliders
Ripple Sketch Slider
A notebook doodle: wobbly ink border, a double pencil stroke rail and a hand drawn blob handle.
Live preview Sliders
Rivet Corner Radius
A riveted steel plate rounds all the way from a hard square into a full circle on hover.
Live preview Sliders
Ruby Heat Slider
A thermostat rail shifting from cold cyan to ruby heat with a scale beneath.
Live preview Sliders
Savanna Locked State
An enabled rail above a locked twin that drains its colour and dims its own label.
Live preview Sliders
Slate Pill Slider
A thick slate capsule rail where a violet fill tracks the pale pill handle.
Live preview Sliders
Socket Mute Volume
A checkbox mute key greys the whole rail out and swaps the readout for a muted badge.
Live preview Sliders
Spindle Axis Joystick
A crosshair gate pad reports the stick position while the rail trims the horizontal axis.
Live preview Sliders
Summit Brushed Rail
Fine vertical striations give the rail and the flat handle a brushed steel finish.
Live preview Sliders
Tether Trim Axis
A signed ruler runs from minus one hundred to plus one hundred with a bright zero detent.
Live preview Sliders
Thicket Header Slider
A tidy header line pins the field name left and its live value chip hard right.
Live preview Sliders
Tide Micro Slider
A compact inline chip barely taller than its label, sized for dense toolbars.
Live preview Sliders
Topaz Steps Slider
The rail is cut into five lit segments so every step lands on a visible block.
Live preview Sliders
Tundra Blur Preview
A frosted preview plate that sharpens the moment focus lands inside the control.
Live preview Sliders
Turbine Throttle Pair
A spinning hub sits beside stacked rails whose colour-coded handles trim top speed and acceleration.