Liquid Glass Slider

Well, it’s 2025 and Apple have seemingly decided to abandon accessible UI in favor of a Windows Vista-esque design language but without the opaque inner panels 😲.

So I better get on the bandwagon and make a liquid glass slider!!! 😰

Liquid Glass

Jokes aside, this is a fun demo of the slider component!

Technically-speaking, there is no ‘liquid’ effect here, because cross-browsers don’t support the backdrop-filter, filter, and mask properties simultaneously, they bug-out. (Also most of the liquid effects you see are just a fractal noise displacement, not a real polar-coordinate liquid effect. I believe a real effect is only possible with canvas or webgl and even then I think the background has to be simulated and not real-time).

I’ve used some creative backdrop-filter: blur(n) and mask properties to get a sort-of ‘liquid’ effect around the edges. By adding a psuedo-element with a different blur-value—and masking it more than the handle—we then get two layers of blur that work independently which gives the illusion of a liquid effect.

Adding on some creative transforms and transitions enhances the liquidey feeling.

<script>

  let slider;
  let classes = '';
  let timer;
  let isDarkMode = false;

  /** 
   * when the slider handle moves, check if it's increasing or decreasing and
   * add the appropriate class to the slider (we use css to animate the floating labels)
  */
  const change = (e) => {
    const delta = -(e.detail.previousValue - e.detail.value);
    if ( delta > 0 ) { classes = 'up';} 
    else { classes = 'down'; }
    clearTimeout( timer );
    // end the animation when movement stops
    timer = setTimeout( stop, 66 );
  }

  const stop = () => classes = '';
</script>

<RangeSlider 
  bind:slider
  id="liquid-glass-slider"
  class={classes}
  darkmode={isDarkMode ? 'force' : false}
  values={[30,70]}
  range
  pushy
  rangeGapMin={20}
  on:change={change}
  on:stop={stop}
/>