<div class="demo">
  <div class="demo__content">
    <svg class="svg">

      <symbol id="s-tile">
        <g>
          <rect width="275" height="275" fill="lightseagreen"></rect>
          <rect width="250" height="250" fill="lightgreen"></rect>
          <rect width="225" height="225" fill="gold"></rect>
          <rect width="200" height="200" fill="sandybrown"></rect>
          <rect width="175" height="175" fill="salmon"></rect>
          <rect width="150" height="150" fill="lightseagreen"></rect>
          <rect width="125" height="125" fill="lightgreen"></rect>
          <rect width="100" height="100" fill="gold"></rect>
          <rect width="75" height="75" fill="sandybrown"></rect>
          <rect width="50" height="50" fill="salmon"></rect>
        </g>
      </symbol>

      <pattern id="pattern"
          patternUnits="userSpaceOnUse"
          viewBox="0 0 275 175"
          width="150" height="95">
        <use xlink:href="#s-tile"></use>

        <rect width="100%" height="100%"
          fill="none" stroke="darkslategrey"
          stroke-width="4"></rect>
      </pattern>

      <symbol id="s-coords">
        <g stroke-dasharray="10 5">
          <line x1="50%" y1="0" x2="50%" y2="100%" />
          <line y1="50%" x1="0" y2="50%" x2="100%" />
        </g>
      </symbol>

      <use xlink:href="#s-coords" stroke="#333"></use>

      <g>
        <rect width="80%" height="90%"
            fill="steelblue" fill-opacity=".3"
            stroke="steelblue" stroke-width="3"></rect>

        <rect width="80%" height="90%"
            fill="url(#pattern)" fill-opacity=".75"></rect>

        <use xlink:href="#s-coords" width="80%" height="90%" stroke="steelblue"></use>
      </g>

    </svg>
  </div>

</div>
/* Vars & Mixins
------------------------------ */

$svgW: 500px;
$svgH: 300px;

$controlH: 40px;

$space: 10px;

$colors: purple, crimson, orangered, yellowgreen, skyblue, steelblue, olive, teal, indigo;

@mixin outline( $counter: 1 ) {
  outline: 2px solid nth( $colors, $counter );
}

@mixin valnMid {
  &:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

/* Base
------------------------------ */

HTML, BODY {
  height: 100%;
}

BODY {
  background: #FFF;  
  background-image:
    linear-gradient( #EEE 1px, transparent 2px),
    linear-gradient( to right, #EEE 1px, transparent 2px);
  background-size: 1em 1em;

}

/* Layout
------------------------------ */

.demo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font: 16px/1.4 Arial, sans-serif;
}

.demo__content {
  position: relative;
  width: $svgW;
  height: $svgH;

  &--svg-only {
    /* default */
  }

  &--left-range {
    width: $svgW + $controlH + $space;
  }

  &--top-range {
    height: $svgH + $controlH + $space;
  }

  &--both-ranges {
    width: $svgW + $controlH + $space;
    height: $svgH + $controlH + $space;
  }
}

/* SVG
------------------------------ */

.svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: $svgW;
  height: $svgH;
  box-sizing: border-box;
  border: 2px solid #333;
}

/* Controls
------------------------------ */

.controls {

  &__title {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 100%;  
  }
}

  .controls--buttons {
    @include valnMid;
    height: $controlH;
    margin-bottom: $space;
    font-size: 1rem;
  }

/* Buttons
------------------------------ */

.button {
  margin-left: .5rem;
  padding: .3rem .5rem;
  vertical-align: middle;
  border: 0;
  background: #BBB;
  cursor: pointer;
  font-size: 1rem;
  text-shadow: 0 0 1px rgba(0, 0, 0, .75);
  color: #FFF;

  &--current {
    background: crimson;
  }
}

/* Ranges
------------------------------ */

.controls--ranges {
  position: absolute;
  width: 100%;
}
  .range {
    position: absolute;
    height: $controlH;
    text-align: center;

    &--hor {
      right: 0;
      width: $svgW;
    }

    &--vert {
      top: $controlH + $space;
      width: $svgH;
      transform-origin: 0 0;
      transform: rotate(-90deg) translateX(-100%);
    }

      &--vert .range__input {
        transform: rotate(180deg);
      }
  }

  .range__input {
    width: 100%;
    margin: auto;
    cursor: pointer;
  }
View Compiled
// Required
// 1. tinyLib:
// https://codepen.io/yoksel/pen/KMgMvw
// 2. demosBuilder: 
// https://codepen.io/yoksel/pen/JKRKyy

console.clear();

var $ = tinyLib;

var config = {
  demoContentLayout: 'both-ranges',
  targetElem: $.get( '#pattern' ),

  inputs: {
    ranges: {
      targetElem: $.get('#pattern'),
      isTied: true,
      keepViewBoxRatio: true,
      // units: '%',

      attrs: {
        type: 'range',
        min: 0,
        max: 300,
        step: 1,
        value: 150,
      },

      list: [
        {
          id: 'hor',
          valName: 'width'
        },
        {
          id: 'vert',
          valName: 'height'
        }
      ]
    }
  }
};

demosBuilder.create();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/yoksel/pen/KMgMvw
  2. https://codepen.io/yoksel/pen/JKRKyy