webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Cascading Select

Fuse.js Typo-Tolerant Product Search with Threshold Tuning

Bootstrap Paste-to-Upload (Clipboard Image Paste)

Bootstrap Multi-File Upload Queue

Avatar Upload

Chip Filter

Brightness Slider — Free CSS Filter Control JS Snippet

Brightness Slider · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsSVGMedia PlayerForms & Validation

Copy & paste

Source Code

<div class="br-card">
  <div class="br-preview" id="brPreview">
    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='150'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f97316'/><stop offset='.5' stop-color='%23db2777'/><stop offset='1' stop-color='%236d28d9'/></linearGradient></defs><rect width='320' height='150' fill='url(%23g)'/><circle cx='250' cy='45' r='26' fill='%23fde68a'/></svg>" alt="Preview">
  </div>
  <div class="br-control">
    <span class="br-ico br-min">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle></svg>
    </span>
    <input type="range" id="brRange" min="20" max="160" value="100" aria-label="Brightness">
    <span class="br-ico br-max" id="brSun">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><line x1="12" y1="2" x2="12" y2="5"></line><line x1="12" y1="19" x2="12" y2="22"></line><line x1="2" y1="12" x2="5" y2="12"></line><line x1="19" y1="12" x2="22" y2="12"></line><line x1="4.9" y1="4.9" x2="7" y2="7"></line><line x1="17" y1="17" x2="19.1" y2="19.1"></line><line x1="4.9" y1="19.1" x2="7" y2="17"></line><line x1="17" y1="7" x2="19.1" y2="4.9"></line></svg>
    </span>
  </div>
  <div class="br-value" id="brValue">100%</div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS brightness() filter
GPU-composited dimming and over-brightening in one property.
Live preview
The image updates instantly as you drag.
Gradient track
Dark-to-yellow background signals the range visually.
Reactive sun icon
Scales with the value and glows above 100%.
Cross-browser thumb
Styled for WebKit and Firefox range thumbs.
Single render path
paint() updates filter, label, and icon together.
Works on any element
Dim a whole theme by filtering a wrapper.
No dependency
Pure HTML/CSS/JS — no canvas or image processing.

About this UI Snippet

Brightness Slider — Live CSS brightness() Filter Control

Screenshot of the Brightness Slider snippet rendered live

A brightness slider lets a user dim or brighten an image, screen preview, or theme — the control in photo editors, display settings, and reading apps. This snippet wires a range input to the CSS brightness() filter so a preview updates live, with a gradient track and a sun icon that grows and glows as you push past full brightness. It's pure HTML, CSS, and vanilla JavaScript with no canvas and no dependency.

brightness() does the heavy lifting

The whole effect is one CSS filter: filter: brightness(factor), where 1 is the original, below 1 darkens, and above 1 over-brightens. The slider's raw 20–160 value is divided by 100 to produce a 0.2–1.6 factor, so the range covers a meaningful dimming-to-blown-out span. A short transition on the filter keeps dragging buttery rather than steppy, and because it's GPU-composited it stays smooth even on large images.

A gradient track that reads as brightness

The range's background is a left-to-right linear-gradient from near-black to warm yellow, so the track itself communicates "dark on the left, bright on the right" before you read any number. The thumb is styled across ::-webkit-slider-thumb and ::-moz-range-thumb so it looks consistent in both engines.

An icon that responds to the value

The sun glyph isn't static — paint() scales its SVG from about 0.78× up to 1.3× as brightness rises, and adds a .bright class above 100% that tints it amber and applies a drop-shadow glow. This gives an analog, at-a-glance sense of intensity that complements the percentage readout, and it's all driven from the same single render function.

One render path

Every change runs through paint(), which reads the slider once and updates the filter, the label, and the icon together. There's no duplicated state, so the preview, the number, and the sun can never disagree — a pattern that scales cleanly if you later add presets or sync to a stored setting.

Beyond images

The same brightness() filter applies to any element — a full theme container, a video, a map, or a canvas — so you can dim an entire UI for night reading by putting the filter on a wrapper. Pair it with contrast() or saturate() in the same filter string to build a complete display-adjustment panel from the same approach.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA preview image renders above a gradient brightness slider.
  2. 2
    Drag the sliderThe preview brightens or dims live via the CSS brightness() filter.
  3. 3
    Watch the sun iconIt scales up as you increase brightness and glows past 100%.
  4. 4
    Read the percentageThe value label shows the exact brightness from 20% to 160%.
  5. 5
    Swap the previewPoint the filter at any image, video, or wrapper element.
  6. 6
    Combine filtersAdd contrast() or saturate() to the same filter string.

Real-world uses

Common Use Cases

Photo editor exposure controls
Adjust exposure beside an image filter editor, with the CSS brightness() filter dimming or over-brightening a live preview on the GPU.
Display settings panels
Drop into a settings panel for screen brightness, where a sun icon scales with the value and glows once it passes 100%.
Night and reading modes
Dim a whole theme alongside a colour mode toggle, with a dark-to-yellow gradient track signalling the range visually.
Media preview controls
Tune preview brightness beside a volume control in a media player, using one wired range input.
Generic filter sliders
Reuse the pattern with a range slider for contrast, saturation or blur, since each only needs a different CSS filter function.
Related: Chip Multiselect
See the Chip Multiselect for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It uses the CSS filter: brightness(factor) property on the image. A factor of 1 is the original, below 1 darkens, and above 1 over-brightens. The slider's 20–160 value is divided by 100 to make a 0.2–1.6 factor, so nothing about the pixel data changes — the browser composites the adjustment on the GPU.

The filter has a short CSS transition, and brightness() is GPU-composited, so updates don't trigger layout or repaint of the underlying bitmap. Even on a large image, dragging stays fluid because the work happens on the compositor, not the main thread.

The paint() function scales the sun SVG from about 0.78× to 1.3× based on the slider value and adds a .bright class above 100% that tints it amber with a drop-shadow glow. It gives an analog sense of intensity that complements the numeric percentage, all from the same render call.

Yes. The brightness() filter works on any element, so applying it to a wrapper div dims everything inside — useful for a night or reading mode. You can also chain it with contrast() and saturate() in one filter string to build a complete display-adjustment panel.

Hold the value in state and bind the target element's filter style to brightness(value/100). Compute the icon scale and glow class from the same value in render. Tailwind users can use the brightness-* utilities for fixed steps, but for a continuous slider bind an inline filter style to the live value instead.