<header class="header">
  <div class="header__title">
    <h1>
      <code>saturate()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, saturation is set to <code>100%</code> using a CSS Custom Property. By moving the range slider, you can decrease the amount of saturation applied to the photo.
    </p>
    
    <div class="controls">
      <label class="controls__label" for="saturation">Saturate:</label>
      <input class="controls__input" type="range" id="saturate" min="0" max="100" value="100">
    </div>

    <div class="example__demo example__demo--saturate">
      <img 
        class="mantis-shrimp" 
        alt="A mantis shrimp lurking on the ocean floor."
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/mantis-shrimp.jpg" />
    </div>
  </div>
  
  <aside>
    <p>
      <small><a href="https://www.flickr.com/photos/41059842@N03/6325523778">"Mantis Shrimp"</a> by <a href=https://www.flickr.com/photos/41059842@N03"">PacificKlaus</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=ccsearch&atype=rich">CC BY-NC 2.0</a>.</small>
    </p>
  </aside>
</main>

// Demo
:root {
  --saturate: 100%;
}

.mantis-shrimp {
  filter: saturate(var(--saturate));
}


// Pen Setup
.example__demo--saturate {
  box-shadow: 0 1rem 1rem 0 hsla(253, 27%, 6%, 0.4);
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  transform: rotate(-1.5deg);
  margin-bottom: 2rem;

  img {
    height: auto;
    width: 100%;
  }
}

.controls {
  display: flex;
  flex-direction: column;
  margin-top: var(--size-epsilon);
}

.controls__label {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.controls__input {
  margin-top: 0.5rem;
}

// Credit: 
// Update CSS Variables with JS
// Wes Bos
// https://codepen.io/wesbos/pen/adQjoY

const rangeSlider = [].slice.call(document.querySelectorAll('#saturate'));

// Listen for changes
rangeSlider.forEach(input => input.addEventListener('change', handleUpdate));
rangeSlider.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
  // Append '%' to the end of the `blur` custom property
  const suffix = (this.id === 'base' ? '' : '%');
  document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
}