API tools faq
paste
Advertisement
mOrloff

Draggable SVG Slider

mOrloff
Jun 22nd, 2012
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.56 KB | None | 0 0
raw download clone embed print report diff
  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="0" class='input_1' />
  14.             <input type="number" value="630" 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.                     y="38%"
  42.                     rx="2%" ry="3%"
  43.                     stroke="#666"
  44.                 />
  45.                 <linearGradient id="green_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  46.                     <stop stop-color = "#b4ddb4" offset = "0%"/>
  47.                     <stop stop-color = "#61c419" offset = "10%"/>
  48.                     <stop stop-color = "#299a0b" offset = "80%"/>
  49.                     <stop stop-color = "#008a00" offset = "100%"/>
  50.                 </linearGradient>
  51.                 <linearGradient id="blue_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  52.                     <stop stop-color = "#7db9e8" offset = "0%"/>
  53.                     <stop stop-color = "#2989d8" offset = "10%"/>
  54.                     <stop stop-color = "#1e5799" offset = "80%"/>
  55.                 </linearGradient>
  56.                 <linearGradient id="orange_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  57.                     <stop stop-color = "#ffa84c" offset = "0%"/>
  58.                     <stop stop-color = "#ff7b0d" offset = "10%"/>
  59.                     <stop stop-color = "#ff7400" offset = "50%"/>
  60.                     <stop stop-color = "#ff670f" offset = "90%"/>
  61.                     <stop stop-color = "#ff6000" offset = "100%"/>
  62.                 </linearGradient>
  63.                 <linearGradient id="white_grad_lin"  x1="0%" y1="50%"  x2="100%" y2="50%">
  64.                     <stop stop-color = "#999" offset = "0%"/>
  65.                     <stop stop-color = "#fff" offset = "20%"/>
  66.                     <stop stop-color = "#fff" offset = "50%"/>
  67.                     <stop stop-color = "#ddd" offset = "80%"/>
  68.                     <stop stop-color = "#999" offset = "90%"/>
  69.                 </linearGradient>
  70.                 <linearGradient id="btm_shading_grad"  x1="50%" y1="0%"  x2="50%" y2="100%">
  71.                     <stop stop-color ="#ddd" stop-opacity="0.3" offset="70%"/>
  72.                     <stop stop-color ="#999" stop-opacity="0.6" offset="100%"/>
  73.                 </linearGradient>
  74.                 <linearGradient id="white_alpha_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">
  75.                     <stop stop-color ="#fff" stop-opacity="0.85" offset="0%"/>
  76.                     <stop stop-color ="#fff" stop-opacity="0.25" offset="20%"/>
  77.                     <stop stop-color ="#fff" stop-opacity="0.55" offset="70%"/>
  78.                     <stop stop-color ="#fff" stop-opacity="0.85" offset="100%"/>
  79.                 </linearGradient>
  80.             </defs>
  81.            
  82.             <use xlink:href="#rect_01" x="210" y="19%" fill="url(#green_grad_lin)" />
  83.             <use xlink:href="#rect_02" x="70" y="31%" fill="url(#blue_grad_lin)" />
  84.             <use xlink:href="#rect_03" x="440" y="8%" fill="url(#orange_grad_lin)" />
  85.             <use xlink:href="#rect_slider_bar" x="2%" y="43%" fill="url(#white_alpha_grad_lin)" />
  86.             <use xlink:href="#rect_slider_btn" id="slider_1" fill="url(#white_grad_lin)" x="160" />
  87.             <use xlink:href="#rect_slider_btn" id="slider_2" fill="url(#white_grad_lin)" x="370" />
  88.         </svg>
  89.     </body>
  90.     <script type="text/javascript">
  91.         var svg   = document.getElementsByTagName('svg')[0];
  92.     var pt    = svg.createSVGPoint();
  93.  
  94.     function mx(evt){
  95.         pt.x = evt.clientX;
  96.         return pt.matrixTransform(svg.getScreenCTM().inverse());
  97.     }
  98.    
  99.     // HTML elements
  100.         var slider_1  = document.querySelector('#slider_1');
  101.         var slider_2  = document.querySelector('#slider_2');
  102.     var input_1 = document.querySelector('.input_1');
  103.     var input_2 = document.querySelector('.input_2');
  104.    
  105.     var scale = 1.0;
  106.     var maxValue;
  107.  
  108.     //var updateFromInput = function(inputId){
  109.     var updateFromInput = function(){
  110.                 var x = input_1.value*1;
  111.         slider_1.x.baseVal.value =  x/scale;
  112.         //var input_id = inputId;
  113.             //console.debug(inputId);
  114.             //var x = input_id.value*1;
  115.     };
  116.    
  117.     var updateInputFromSlider = function(){
  118.         //input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(2);
  119.         //input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(4);
  120.         input_1.value = ( slider_1.x.baseVal.value*scale).toFixed();
  121.     };
  122.        
  123.     input_1.addEventListener('input',updateFromInput,false);
  124.     input_2.addEventListener('input',updateFromInput,false);
  125. //  input_1.addEventListener('input',updateFromInput("input_1"),false);
  126. //  input_2.addEventListener('input',updateFromInput("input_2"),false);
  127.        
  128.     var dragging = false;
  129.     slider_1.addEventListener('mousedown',function(evt){
  130.         var offset = mx(evt);
  131.         dragging = true;
  132.         offset.x = slider_1.x.baseVal.value - offset.x;
  133.         var move = function(evt){
  134.             var now = mx(evt);
  135.             var x = offset.x + now.x;
  136.             slider_1.x.baseVal.value = x;
  137.             x = Math.abs(x)*scale;
  138.             updateInputFromSlider();
  139.         };
  140.        
  141.                 svg.addEventListener('mousemove',move,false);                
  142.         document.documentElement.addEventListener('mouseup',function(){
  143.             dragging = false;
  144.             svg.removeEventListener('mousemove',move,false);
  145.         },false);
  146.     },false);
  147.  
  148.     </script>
  149.     <!-- my email is mo @t voyagercomponents d0t com -->
  150.     <!-- Also, I threw a copy here for collaboration: http://jsfiddle.net/mOrloff/ucnyz/ -->
  151. </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!