API tools faq
paste
Advertisement
mOrloff

Draggable SVG Slider

mOrloff
Jun 22nd, 2012
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style type="text/css">
  7.                 svg { border: 1px solid #000; margin: 1.5em; }
  8.                 .slidable { cursor: w-resize; }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <p class="inputs">
  13.             <input type="number" value="370" class='input_1' />
  14.             <input type="number" value="0" class='input_2' />
  15.         </p>
  16.         <svg id="price_chart" width="630" height="390" xmlns="http://www.w3.org/2000/svg">
  17.             <defs>
  18.                 <rect id="rect_01"
  19.                     width="330" height="62%"
  20.                     rx="10" ry="10"
  21.                     stroke="#444"
  22.                 />
  23.                 <rect id="rect_02"
  24.                     width="200" height="38%"
  25.                     rx="10" ry="10"
  26.                     stroke="#444"
  27.                 />
  28.                 <rect id="rect_03"
  29.                     width="90" height="84%"
  30.                     rx="10" ry="10"
  31.                     stroke="#444"
  32.                 />
  33.                 <rect id="rect_slider_bar"
  34.                     width="96%" height="14%"
  35.                     rx="10" ry="10"
  36.                     stroke="#ccc"
  37.                 />
  38.                 <rect id="rect_slider_btn"
  39.                     class="slidable"
  40.                     width="4%" height="24%"
  41.                     rx="2%" ry="3%"
  42.                     stroke="#666"
  43.                     transform="matrix(1 0 0 1 0 0)"
  44.                     onmousedown="selectElement(evt)"
  45.                 />
  46.                 <linearGradient id="green_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  47.                     <stop stop-color = "#b4ddb4" offset = "0%"/>
  48.                     <stop stop-color = "#61c419" offset = "10%"/>
  49.                     <stop stop-color = "#299a0b" offset = "80%"/>
  50.                     <stop stop-color = "#008a00" offset = "100%"/>
  51.                 </linearGradient>
  52.                 <linearGradient id="blue_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  53.                     <stop stop-color = "#7db9e8" offset = "0%"/>
  54.                     <stop stop-color = "#2989d8" offset = "10%"/>
  55.                     <stop stop-color = "#1e5799" offset = "80%"/>
  56.                 </linearGradient>
  57.                 <linearGradient id="orange_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  58.                     <stop stop-color = "#ffa84c" offset = "0%"/>
  59.                     <stop stop-color = "#ff7b0d" offset = "10%"/>
  60.                     <stop stop-color = "#ff7400" offset = "50%"/>
  61.                     <stop stop-color = "#ff670f" offset = "90%"/>
  62.                     <stop stop-color = "#ff6000" offset = "100%"/>
  63.                 </linearGradient>
  64.                 <linearGradient id="white_grad_lin"  x1="0%" y1="50%"  x2="100%" y2="50%">
  65.                     <stop stop-color = "#999" offset = "0%"/>
  66.                     <stop stop-color = "#fff" offset = "20%"/>
  67.                     <stop stop-color = "#fff" offset = "50%"/>
  68.                     <stop stop-color = "#ddd" offset = "80%"/>
  69.                     <stop stop-color = "#999" offset = "90%"/>
  70.                 </linearGradient>
  71.                 <linearGradient id="btm_shading_grad"  x1="50%" y1="0%"  x2="50%" y2="100%">
  72.                     <stop stop-color ="#ddd" stop-opacity="0.3" offset="70%"/>
  73.                     <stop stop-color ="#999" stop-opacity="0.6" offset="100%"/>
  74.                 </linearGradient>
  75.                 <linearGradient id="white_alpha_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  76.                     <stop stop-color ="#fff" stop-opacity="0.85" offset="0%"/>
  77.                     <stop stop-color ="#fff" stop-opacity="0.25" offset="20%"/>
  78.                     <stop stop-color ="#fff" stop-opacity="0.55" offset="70%"/>
  79.                     <stop stop-color ="#fff" stop-opacity="0.85" offset="100%"/>
  80.                 </linearGradient>
  81.             </defs>
  82.            
  83.             <use xlink:href="#rect_01" x="210" y="19%" fill="url(#green_grad_lin)" />
  84.             <use xlink:href="#rect_02" x="70" y="31%" fill="url(#blue_grad_lin)" />
  85.             <use xlink:href="#rect_03" x="440" y="8%" fill="url(#orange_grad_lin)" />
  86.             <use xlink:href="#rect_slider_bar" x="2%" y="43%" fill="url(#white_alpha_grad_lin)" />
  87.             <use xlink:href="#rect_slider_btn" id="slider_1" x="160" y="38%" fill="url(#white_grad_lin)" />
  88.            
  89.             <rect class="slidable" id="slider_2"
  90.                x="370" y="38%"
  91.                width="4%" height="24%"
  92.                rx="2%" ry="3%"
  93.                stroke="#666"
  94.                fill="url(#white_grad_lin)" />
  95.         </svg>
  96.     </body>
  97.     <script type="text/javascript">
  98.         var svg   = document.getElementsByTagName('svg')[0];
  99.     var pt    = svg.createSVGPoint();
  100.  
  101.     function mxy(evt){
  102.         pt.x = evt.clientX;
  103.         return pt.matrixTransform(svg.getScreenCTM().inverse());
  104.     }
  105.    
  106.     // HTML elements
  107.         var slider_1  = document.querySelector('#slider_1');
  108.         var slider_2  = document.querySelector('#slider_2');
  109.     var input_1 = document.querySelector('.input_1');
  110.     var input_2 = document.querySelector('.input_2');
  111.    
  112.     var scale = 1.0;
  113.     var maxValue;
  114.  
  115.     var updateFromInput = function(){
  116.         var x = input_1.value*1;
  117.         slider_1.x.baseVal.value =  x/scale;
  118.     };  
  119.    
  120.     var updateInputFromSlider = function(){
  121. //      input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(2);
  122. //      input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(4);
  123.         input_1.value = ( slider_1.x.baseVal.value*scale).toFixed();
  124.     };
  125.        
  126.     input_1.addEventListener('input',updateFromInput,false);
  127.     input_2.addEventListener('input',updateFromInput,false);
  128.        
  129.     var dragging = false;
  130.     slider_1.addEventListener('mousedown',function(evt){
  131.         var offset = mxy(evt);
  132.         dragging = true;
  133.         offset.x = slider_1.x.baseVal.value - offset.x;
  134.         offset.y = slider_1.y.baseVal.value;
  135.         var move = function(evt){
  136.             var now = mxy(evt);
  137.             var x = offset.x + now.x;
  138.             slider_1.x.baseVal.value = x;
  139.             //var y = -(offset.y + now.y);
  140.             var y = offset.y;  // keep the Y value constant so it only sildes on X axis
  141.             //slider_1.y.baseVal.value = -y; // this
  142.             slider_1.y.baseVal.value = y;
  143.             x = Math.abs(x)*scale, y=Math.abs(y)*scale;
  144.             updateInputFromSlider();
  145.         };
  146.        
  147.                 svg.addEventListener('mousemove',move,false);                
  148.         document.documentElement.addEventListener('mouseup',function(){
  149.             dragging = false;
  150.             svg.removeEventListener('mousemove',move,false);
  151.         },false);
  152.     },false);
  153.    
  154.     </script>
  155. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!