Skip to content

Instantly share code, notes, and snippets.

Created March 17, 2018 09:44
Show Gist options
  • Save anonymous/c348212d621153189198e4b0b657c04b to your computer and use it in GitHub Desktop.
Save anonymous/c348212d621153189198e4b0b657c04b to your computer and use it in GitHub Desktop.
svg { border: 1px solid #000; margin: 1.5em; }
.slidable { cursor: w-resize; }
<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>
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment