<div class="controller">
  <img src="http://elementqueries.com/eqcss-logo.png" alt="element queries">
  <p>Drag the slider to change the component's dimensions using <a href="http://elementqueries.com">eqcss</a></p>

  <input type="range" min="0" max="100" value="100" step="1" class="range blue" id="range">
</div>

<article class="context">
  <div class="component">
    <figure>
      <picture>
        <source media="(max-width: 459.9px)" srcset="//placebeard.it/440/440 1x,
        //placebeard.it/880/880 2x, //placebeard.it/1320/1320 3x">
        <source media="(min-width: 460px)" srcset="//placebeard.it/600/600 1x,
        //placebeard.it/1200/1200 2x, //placebeard.it/1800/1800 3x">
        <img src="//placebeard.it/200/200" alt="">
      </picture>
    </figure>

    <div class="component__body">
      <h3 class="component__title">Heading</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quidem ipsam enim delectus provident, vero accusamus molestiae qui aliquam nulla excepturi vitae, assumenda debitis incidunt est officiis odio animi consequatur.</p>
    </div>
  </div>
</article>

// Global STYLES
// ==========================================================

$bg: #1b4861;
html{box-sizing:border-box;font-family: 'Open Sans';font-weight: 400;}html,body{height:100%;}body{box-sizing:border-box;padding:1rem;width:100%;max-width:1200px;margin:auto;background:$bg;}img{max-width:100%;width: 100%;}figure{margin:0;width: 100%;}*,*:before,*:after {box-sizing: inherit;}


// Component STYLES
// ==========================================================

.context {
  margin: auto;
  width: 100%;
  color: #F0F1FA;
}

.component {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  width: 100%;
  margin: auto;
  background: white;
  color: #222;
  img {
    border-radius: 80%;
  }
  &__body {
    padding: 1rem;
  }
  .component__title {
    margin-top: 0;
  }
}


// Element Query
// ==========================================================

@element .component and (min-width: 460px) {
  eq_this {
    align-items: flex-start;
    flex-direction: row;
  }
}


// Custom Range Slider
// https://codepen.io/egrucza/pen/LEoOQZ?editors=0010
// ==========================================================

.controller {
  width: 100%;
  max-width: 500px;
  margin: auto;
  text-align: center;
  img {
    filter: invert(100%);
    width: 100px;
    height: auto;
    margin: auto;
    text-align: center;
    display: inline-block;
  }
  p { color: white; }
  a { color: #ff0f0f; }
}

.range {
  appearance: none;
  margin-bottom: 50px;
  width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
  appearance: none;
  background: rgba(59,173,227,1);
  height: 2px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-moz-range-track {
  appearance: none;
  background: rgba(59,173,227,1);
  height: 2px;
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  max-width: 80px;
  position: relative;
  bottom: 11px;
  background-color: #1d1c25;
  cursor: -webkit-grab;
  transition: border 1000ms ease;
}

input[type=range]::-moz-range-thumb {
  appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  max-width: 80px;
  position: relative;
  bottom: 11px;
  background-color: #1d1c25;
  cursor: -moz-grab;
  transition: border 1000ms ease;
}

.range.blue::-webkit-slider-thumb {
   border-color: rgb(59,173,227);
}

.range.ltpurple::-webkit-slider-thumb {
   border-color: rgb(87,111,230);
}

.range.purple::-webkit-slider-thumb {
   border-color: rgb(152,68,183);
}

.range.pink::-webkit-slider-thumb {
   border-color: rgb(255,53,127);
}

.range.blue::-moz-range-thumb {
   border-color: rgb(59,173,227);
}

.range.ltpurple::-moz-range-thumb {
   border-color: rgb(87,111,230);
}

.range.purple::-moz-range-thumb {
   border-color: rgb(152,68,183);
}

.range.pink::-moz-range-thumb {
   border-color: rgb(255,53,127);
}

input[type=range]::-webkit-slider-thumb:active {
  cursor: -webkit-grabbing;
}

input[type=range]::-moz-range-thumb:active {
  cursor: -moz-grabbing;
}

function select(s) {
  return document.querySelector(s);
}

let rangeInput = document.getElementById("range"),
    parent     = select('.context');

rangeInput.addEventListener('input', function(e) {
  parent.style = 'width:' + e.target.value + '%';
}, false);