×

Welcome to TagMyCode

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