×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Matthew Speicher
Added: Jun 24, 2016 2:21 PM
Views: 3
Tags: no tags
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.  
  6. #bar{
  7.         width:200px;
  8.         height:25px;
  9.         border:1px solid black;
  10.         position:relative;
  11. }
  12.  
  13. #slider{
  14.         width:0%;
  15.         height:100%;
  16.         background-color:red;
  17.         top:0px;
  18.         left:0px;
  19.         position:absolute;
  20.         cursor:pointer;
  21. }
  22.  
  23. #info{
  24.         width:200px;
  25.         height:25px;
  26.         border:1px solid black;
  27. }
  28.  
  29. </style>
  30.  
  31. <script type="text/javascript">
  32. var bar, slider;
  33.  
  34. function init(){
  35.        
  36.         bar = document.getElementById('bar');
  37.         slider = document.getElementById('slider');
  38.         info = document.getElementById('info');
  39.         bar.addEventListener('mousedown', startSlide, false);  
  40.         bar.addEventListener('mouseup', stopSlide, false);
  41. }
  42.  
  43. function startSlide(event){
  44.         var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
  45.         info.innerHTML = 'start' + set_perc + '%';     
  46.         bar.addEventListener('mousemove', moveSlide, false);   
  47.         slider.style.width = (set_perc * 100) + '%';   
  48. }
  49.  
  50. function moveSlide(event){
  51.         var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
  52.         info.innerHTML = 'moving : ' + set_perc + '%';
  53.         slider.style.width = (set_perc * 100) + '%';
  54. }
  55.  
  56. function stopSlide(event){
  57.         var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
  58.         info.innerHTML = 'done : ' + set_perc + '%';
  59.         bar.removeEventListener('mousemove', moveSlide, false);
  60.         slider.style.width = (set_perc * 100) + '%';
  61. }
  62.  
  63. </script>
  64.  
  65. </head>
  66. <body onload='init()'>
  67.  
  68. <div id='bar'>
  69. <div id='slider'>
  70.  
  71. </div>
  72. </div>
  73. <br />
  74.  
  75. <div id='info'>info</div>
  76.  
  77. </body>
  78. </html>