JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<input id="opacity" type="range" min="1" max="50" value="0">

JavaScript

var url = "http://benhowdle.im/img/myface.png";
var img = new Image();
img.src = url;
img.id = 'dasImage';
var vendor = function () {
    var tmp = document.createElement("div"),
        prefixes = 'webkit Moz O ms'.split(' '),
        i;
    for (i in prefixes) {
        if (typeof tmp.style[prefixes[i] + 'Filter'] != 'undefined') {
            return prefixes[i];
        }
    }
}

var prefix = vendor();
console.log(prefix);

function applyFilter(el, amount) {
    el.style[prefix + 'Filter'] = 'blur(' + (50 - amount) + 'px)';
}

var slider = document.querySelector('#opacity');
applyFilter(img, slider.value);

document.body.appendChild(img);

slider.addEventListener('change', function () {
    applyFilter(document.querySelector('#dasImage'), this.value);
});