tatarjr

// ...

  <Icon name="brush" />
    
// ...

tatarjr

import React from 'react';

const req = require.context('../assets/icons', false, /^\.\/.*\.svg$/);
const GLYPHS = (req.keys()).reduce((glyphs, key) => {
  const filename = key.match(new RegExp(/[^/]+(?=\.svg$)/))[0];
  return Object.assign({}, glyphs, { [filename]: req(key) });
}, {});

const DEFAULT_CLASS = 'ji-svg';

tatarjr

// Call & init
$(document).ready(function(){
  $('.ba-slider').each(function(){
    var cur = $(this);
    // Adjust the slider
    var width = cur.width()+'px';
    cur.find('.resize img').css('width', width);
    // Bind dragging events
    drags(cur.find('.handle'), cur.find('.resize'), cur);
  });

tatarjr

<div class="ba-slider">
   <img src="http://i.imgur.com/BIHN8KQ.jpg">
   <div class="resize">
       <img src="http://i.imgur.com/nS6dvpq.jpg">
   </div>
   <span class="handle"></span>
</div>

tatarjr

.ba-slider {
    position: relative;
    overflow: hidden;
}

.ba-slider img {
    width: 100%;
    display:block;
}

tatarjr

// Call & init
$(document).ready(function(){
  $('.ba-slider').each(function(){
    var cur = $(this);
    // Adjust the slider
    var width = cur.width()+'px';
    cur.find('.resize img').css('width', width);
  });
});

tatarjr

.handle {
  position:absolute; 
  left:50%;
  top:0;
  bottom:0;
  width:4px;
  margin-left:-2px;

  background: rgba(0,0,0,.5);
  cursor: ew-resize;

tatarjr

function drags(dragElement, resizeElement, container) {
	
  // Initialize the dragging event on mousedown.
  dragElement.on('mousedown touchstart', function(e) {
    
    dragElement.addClass('draggable');
    resizeElement.addClass('resizable');
    
    // Check if it's a mouse or touch event and pass along the correct value
    var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;