(source: http://jsfiddle.net/ucnyz/4/)

fiddle.css

svg { border: 1px solid #000; margin: 1.5em; }
.slidable { cursor: w-resize; }

fiddle.html

<p class="inputs">
    <input type="number" value="0" class='input_1' />
    <input type="number" value="315" class='input_2' />
</p>
<svg id="price_chart" width="252" height="156" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <rect id="rect_01"
             width="132" height="62%" 
             rx="4" ry="4" 
             stroke="#444" 
         />
        <rect id="rect_02"
             width="80" height="38%" 
             rx="4" ry="4" 
             stroke="#444" 
         />
        <rect id="rect_03"
             width="36" height="84%" 
             rx="4" ry="4" 
             stroke="#444" 
         />
        <rect id="rect_slider_bar"
             width="96%" height="14%" 
             rx="2" ry="2" 
             stroke="#ccc" 
         />
        <rect id="rect_slider_btn"
             class="slidable"
             width="4%" height="24%" 
             y="38%"
             rx="2%" ry="3%"
             stroke="#666" 
         />
        <linearGradient id="green_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
            <stop stop-color = "#b4ddb4" offset = "0%"/>
            <stop stop-color = "#61c419" offset = "10%"/>
            <stop stop-color = "#299a0b" offset = "80%"/>
            <stop stop-color = "#008a00" offset = "100%"/>
        </linearGradient>
        <linearGradient id="blue_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
            <stop stop-color = "#7db9e8" offset = "0%"/>
            <stop stop-color = "#2989d8" offset = "10%"/>
            <stop stop-color = "#1e5799" offset = "80%"/>
        </linearGradient>
        <linearGradient id="orange_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
            <stop stop-color = "#ffa84c" offset = "0%"/>
            <stop stop-color = "#ff7b0d" offset = "10%"/>
            <stop stop-color = "#ff7400" offset = "50%"/>
            <stop stop-color = "#ff670f" offset = "90%"/>
            <stop stop-color = "#ff6000" offset = "100%"/>
        </linearGradient>
        <linearGradient id="white_grad_lin"  x1="0%" y1="50%"  x2="100%" y2="50%">
            <stop stop-color = "#999" offset = "0%"/>
            <stop stop-color = "#fff" offset = "20%"/>
            <stop stop-color = "#fff" offset = "50%"/>
            <stop stop-color = "#ddd" offset = "80%"/>
            <stop stop-color = "#999" offset = "90%"/>
        </linearGradient>
        <linearGradient id="btm_shading_grad"  x1="50%" y1="0%"  x2="50%" y2="100%">
            <stop stop-color ="#ddd" stop-opacity="0.3" offset="70%"/>
            <stop stop-color ="#999" stop-opacity="0.6" offset="100%"/>
        </linearGradient>
        <linearGradient id="white_alpha_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
            <stop stop-color ="#fff" stop-opacity="0.85" offset="0%"/>
            <stop stop-color ="#fff" stop-opacity="0.25" offset="20%"/>
            <stop stop-color ="#fff" stop-opacity="0.55" offset="70%"/>
            <stop stop-color ="#fff" stop-opacity="0.85" offset="100%"/>
        </linearGradient>
    </defs> 

    <use xlink:href="#rect_01" x="84" y="19%" fill="url(#green_grad_lin)" />
    <use xlink:href="#rect_02" x="28" y="31%" fill="url(#blue_grad_lin)" />
    <use xlink:href="#rect_03" x="176" y="8%" fill="url(#orange_grad_lin)" />
    <use xlink:href="#rect_slider_bar" x="2%" y="43%" fill="url(#white_alpha_grad_lin)" />
    <use xlink:href="#rect_slider_btn" id="slider_1" fill="url(#white_grad_lin)" x="10" />
    <use xlink:href="#rect_slider_btn" id="slider_2" fill="url(#white_grad_lin)" x="148" />
</svg>

fiddle.js

var svg   = document.getElementsByTagName('svg')[0];
var pt    = svg.createSVGPoint();

function mx(evt){
        pt.x = evt.clientX;
        return pt.matrixTransform(svg.getScreenCTM().inverse());
}

// HTML elements
var slider_1  = document.querySelector('#slider_1');
var slider_2  = document.querySelector('#slider_2');
var input_1 = document.querySelector('.input_1');
var input_2 = document.querySelector('.input_2');

var scale = 1.0;
var maxValue;

function updateFromInput(id){               
        if(id==1){
            var x = input_1.value*1;
            slider_1.x.baseVal.value =  x/scale;
        }else if(id==2){
            var x = input_2.value*1;
            slider_2.x.baseVal.value =  x/scale;
        }
};

function updateInputFromSlider(id){
        //input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(2);
        //input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(4);                
        if(id==1){
            input_1.value = ( slider_1.x.baseVal.value*scale).toFixed();
        }else if(id==2){
            input_2.value = ( slider_2.x.baseVal.value*scale).toFixed();
        }
};

input_1.addEventListener('input',function(){updateFromInput(1);},false);
input_2.addEventListener('input',function(){updateFromInput(2);},false);


var dragging = false;
slider_1.addEventListener('mousedown',function(evt){
        var offset = mx(evt);
        dragging = true;
        offset.x = slider_1.x.baseVal.value - offset.x;
        var move = function(evt){
                var now = mx(evt);
                var x = offset.x + now.x;
                var limitLower = 0;
                var limitUpper = 20;
                if ( x < limitLower || x > limitUpper ) {
                    return;
                }           
                slider_1.x.baseVal.value = x;
                x = Math.abs(x)*scale;
                updateInputFromSlider(1);
        };

        svg.addEventListener('mousemove',move,false);                
        document.documentElement.addEventListener('mouseup',function(){
                dragging = false;
                svg.removeEventListener('mousemove',move,false);
        },false);
},false);


slider_2.addEventListener('mousedown',function(evt){
        var offset = mx(evt);
        dragging = true;
        offset.x = slider_2.x.baseVal.value - offset.x;
        var move = function(evt){
                var now = mx(evt);
                var x = offset.x + now.x;
                slider_2.x.baseVal.value = x;
                x = Math.abs(x)*scale;
                updateInputFromSlider(2);
        };

        svg.addEventListener('mousemove',move,false);                
        document.documentElement.addEventListener('mouseup',function(){
                dragging = false;
                svg.removeEventListener('mousemove',move,false);
        },false);
},false);

slider_1.addEventListener('dblclick',function(){
    //
},false);