<table><tr><td>
<div>Red Weight</div>
<div id="valueDisplay">0.33</div>
<input type="range" id="slider" min="0" max="1" step=".005" value="0.33"
/>
<p>
  </td><td>
<div>Green Weight</div>
<div id="valueDisplay2">0.33</div>
<input type="range" id="slider2" min="0" max="1" step=".005" value=".33"
/>
<p>    </td><td>
<div>Blue Weight</div>
<div id="valueDisplay3">0.33</div>
<input type="range" id="slider3" min="0" max="1" step=".005" value=".33"
/>
  </td><tr>
  </table>

<svg width="800px" height="600px" viewbox="0 0 800 600">
    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%">
        <feColorMatrix id="greyscaler" type="matrix" values=".33 .33 .33 0 0 
                                                            .33 .33 .33 0 0 
                                                            .33 .33 .33 0 0 
                                                             0    0   0 1 0"/>
        </filter>     
    </defs>
  
 <image x="0" y="0" width="550" height="370" preserveAspectRatio="true"
    filter="url(#f1)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/>
</svg>
svg {
    margin: 20px 20px;
}
input[type=range] {
    width: 200px;
    height: 10px;
    margin: 10px 0 0 10px;
    var slider = document.getElementById("slider");
    var redDisplay = document.getElementById("valueDisplay");
    slider.addEventListener('change', changeRed, false);

    var slider2 = document.getElementById("slider2");
    var greenDisplay = document.getElementById("valueDisplay2");
    slider2.addEventListener('change', changeGreen, false);

    var slider3 = document.getElementById("slider3");
    var blueDisplay = document.getElementById("valueDisplay3");
    slider3.addEventListener('change', changeBlue, false);

    var colMatrix = document.getElementById("greyscaler");
    var matrixValues;


    function changeRed() {
        redDisplay.innerHTML = Math.round(slider.value*100)/100;
        matrixValues = (redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML  + " 0 0 "+                                                greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " 0 0 "+
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML  + " 0 0 0 0 0 1 0"
                     );
        colMatrix.setAttribute("values", matrixValues);
    };
    changeRed();


    function changeGreen() {
        greenDisplay.innerHTML = Math.round(slider2.value*100)/100;
        matrixValues = (redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML  + " 0 0 "+                                                greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " 0 0 "+
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML  + " 0 0 0 0 0 1 0"
                     );
        colMatrix.setAttribute("values", matrixValues);
    };
    changeGreen();

    function changeBlue() {
        blueDisplay.innerHTML = Math.round(slider3.value*100)/100;
        matrixValues = (redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML + " " + 
                     redDisplay.innerHTML  + " 0 0 "+                                                greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " " + 
                     greenDisplay.innerHTML + " 0 0 "+
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML + " " + 
                     blueDisplay.innerHTML  + " 0 0 0 0 0 1 0"
                     );
        colMatrix.setAttribute("values", matrixValues);
    };
    changeBlue();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.