Liquid Glass Slider

An iOS 26-inspired liquid glass slider with draggable thumb and SVG refraction effects.

Browser Compatibility

MDN Source

Chrome...

Full

Edge...

Full

Safari...

Full

Firefox...

Partial

Opera...

Full

Compatibility Note for Liquid Glass Refraction:

Firefox supports backdrop-filter but currently lacks support for referring to SVG filters via url(#filterId). This results in the surface appearing as a simple semi-transparent blur without the refractive liquid effect.

Open in

"use client";
 
import { LiquidGlassSlider } from "@/components/jyotirmoydas/liquid-glass-slider";
 
export function LiquidGlassSliderDemo() {
  return (
    <LiquidGlassSlider
      defaultValue={30}
      onChange={(value) => console.log("Value:", value)}
    />
  );
}

Installation

bunx --bun shadcn@latest add @jyotirmoydas/liquid-glass-slider

Usage

import { LiquidGlassSlider } from "@/components/jyotirmoydas/liquid-glass-slider";

<LiquidGlassSlider
  defaultValue={50}
  onChange={(value) => console.log("Value:", value)}
/>

API Reference

Value Control

Prop	Type	Default	Description
`value`	`number`		Controlled value of the slider.
`defaultValue`	`number`	`10`	Default value (uncontrolled mode).
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step size for value changes.
`onChange`	`(value: number) => void`		Callback when value changes.
`onDragStart`	`() => void`		Callback when dragging starts.
`onDragEnd`	`() => void`		Callback when dragging ends.

Appearance

Prop	Type	Default	Description
`className`	`string`		Additional CSS classes.
`width`	`number`	`330`	Width of the slider track in pixels.
`fillColor`	`string`	`"#0377F7"`	Color of the track fill (progress).
`trackColor`	`string`	`"#89898F66"`	Color of the track background.
`thumbColor`	`string`	`"rgba(255, 255, 255, 1)"`	Color of the thumb.
`disabled`	`boolean`	`false`	Whether the slider is disabled.

Optical Parameters

Fine-tune the liquid glass refraction effect.

Prop	Type	Default	Description
`blur`	`number`	`0`	Blur level for the glass refraction effect.
`specularOpacity`	`number`	`0.4`	Opacity of the specular highlight.
`specularSaturation`	`number`	`7`	Saturation multiplier for the specular highlight.
`refractionLevel`	`number`	`1`	Base refraction level (magnification intensity).

Examples

Default

Basic slider with default settings.

Open in

"use client";
 
import { LiquidGlassSlider } from "@/components/jyotirmoydas/liquid-glass-slider";
 
export function LiquidGlassSliderDemo() {
  return (
    <LiquidGlassSlider
      defaultValue={30}
      onChange={(value) => console.log("Value:", value)}
    />
  );
}

Custom Colors

Customize the fill, track, and thumb colors.

Open in

"use client";
 
import { LiquidGlassSlider } from "@/components/jyotirmoydas/liquid-glass-slider";
 
export function LiquidGlassSliderCustomColorsDemo() {
  return (
    <LiquidGlassSlider
      defaultValue={50}
      fillColor="#22c55e"
      trackColor="#14532d44"
      thumbColor="rgba(34, 197, 94, 0.9)"
    />
  );
}

Custom Optical Parameters

Fine-tune the glass refraction effect.

Open in

"use client";
 
import { LiquidGlassSlider } from "@/components/jyotirmoydas/liquid-glass-slider";
 
export function LiquidGlassSliderOpticalDemo() {
  return (
    <LiquidGlassSlider
      defaultValue={60}
      blur={0.3}
      specularOpacity={0.7}
      specularSaturation={10}
      refractionLevel={1.2}
    />
  );
}