Skip to content
staticview

Slider iOS

Recreate the iOS liquid glass slider with backdrop-filter part styling and a :state(--active) glass thumb.

Note

The lens refraction requires SVG filters composed over the backdrop, which only Chromium supports. Safari and Firefox render the glass thumb without the bend.

Code

The following example assumes that you have imported the component and set up the theme.

iOS Slider
<div class="slider-wrapper">
  <sv-slider class="ios-slider" aria-label="Volume" thumb-contained value="60">
    <!-- White pill thumb that turns to clear glass while active -->
    <div class="liquid-thumb" aria-hidden="true" slot="thumb-1"></div>
  </sv-slider>


  <!-- Lens displacement map: red/blue encode X/Y shifts, the blurred gray core stays neutral -->
  <svg class="glass-filter" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <filter id="ios-glass-lens" color-interpolation-filters="sRGB" height="100%" width="100%" x="0%" y="0%">
      <feImage
        href="data:image/svg+xml;utf8,
        <svg xmlns='http://www.w3.org/2000/svg' width='160' height='116'>
          <defs>
            <linearGradient id='x' x1='0' x2='1' y1='0' y2='0'>
              <stop offset='0' stop-color='%23f00'/>
              <stop offset='1' stop-color='%23000'/>
            </linearGradient>


            <linearGradient id='y' x1='0' x2='0' y1='0' y2='1'>
              <stop offset='0' stop-color='%2300f'/>
              <stop offset='1' stop-color='%23000'/>
            </linearGradient>
          </defs>


          <rect width='160' height='116' fill='%23000'/>
          <rect width='160' height='116' fill='url(%23x)'/>
          <rect width='160' height='116' fill='url(%23y)' style='mix-blend-mode:screen'/>
          <rect x='10' y='10' width='140' height='96' rx='48' fill='%23808080' style='filter:blur(6px)'/>
        </svg>"
        preserveAspectRatio="none"
        result="map"
      ></feImage>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="14" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
    </filter>
  </svg>
</div>


<style>
  .slider-wrapper {
    display: grid;
    place-items: center;
    padding: 4.5em 2.5em;
    border-radius: 4px;
  }


  /* Hide the SVG */
  .glass-filter {
    position: absolute;
    inline-size: 0;
    block-size: 0;
  }


  .ios-slider {
    --sv-thickness: 0.4em;
    --sv-thumb-size: 1.6em;
    --sv-bdr-rad-md: 1em;


    inline-size: min(100%, 20em);
    cursor: grab;


    &::part(track) {
      background: #7878804d;
      border: none;
      box-shadow: inset 0 0 1px light-dark(#30303073, #ffffff73);
    }


    &::part(fill) {
      background: #0a84ff;
    }


    &:state(--active) {
      cursor: grabbing;
    }
  }


  /* White pill thumb at rest */
  .liquid-thumb {
    position: relative;
    inline-size: var(--sv-thumb-size);
    block-size: 1.15em;
    background: #fff;
    border-radius: 0.6em;
    box-shadow: 0 1px 4px #0000004d;
    transition:
      scale 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
      block-size 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
      background var(--sv-dur) var(--sv-ease),
      box-shadow var(--sv-dur) var(--sv-ease);


    /* Only the thumb grows and turns to clear glass while dragging */
    .ios-slider:state(--active) & {
      overflow: clip;
      background: #ffffff1a;
      box-shadow:
        0 6px 16px #00000045,
        inset 0 1px 1px #ffffff8c;
      scale: 1.25;


      /* Refraction: bends what sits behind the thumb through the lens map, clear center. */
      &::before {
        position: absolute;
        inset: 0;
        content: "";
        border-radius: inherit;
        filter: url("#ios-glass-lens");
        backdrop-filter: saturate(150%);
      }


      /* Edge ring that reflects the colors behind it, glinting along the light diagonals */
      &::after {
        position: absolute;
        inset: 0;
        padding: 1px;
        content: "";
        border-radius: inherit;
        backdrop-filter: blur(4px) brightness(180%) saturate(190%);
        mask:
          conic-gradient(#00000040 0deg, #000 110deg, #000 170deg, #00000026 250deg, #000 290deg, #000 340deg, #00000040 360deg),
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        mask-composite: intersect, exclude, add;
      }
    }
  }


  @media (prefers-reduced-motion: reduce) {
    .liquid-thumb {
      transition-duration: 0s;
    }
  }
</style>