comparison interfaces/horizontal-sliders.js @ 3132:38d2150045f5

#286 reformatted the horizontal sliders to use grids

     var playing = false;
     this.parent = audioObject;
 
     this.holder = document.createElement('div');
     this.title = document.createElement('div');
+    this.titleH4 = document.createElement('h4');
     this.slider = document.createElement('input');
     this.play = document.createElement('button');
 
     this.holder.className = 'track-slider';
     this.holder.style.width = window.innerWidth - 200 + 'px';
+    this.title.appendChild(this.titleH4);
     this.holder.appendChild(this.title);
     this.holder.appendChild(this.slider);
     this.holder.appendChild(this.play);
     this.holder.setAttribute('trackIndex', audioObject.id);
-    this.title.textContent = label;
+    this.titleH4.textContent = label;
     this.title.className = 'track-slider-title';
 
     this.slider.type = "range";
     this.slider.className = "track-slider-range track-slider-not-moved";
     this.slider.min = "0";
     this.slider.max = "1";
     this.slider.step = "0.01";
-    this.slider.style.width = window.innerWidth - 420 + 'px';
     this.slider.onchange = function () {
         var time = audioEngineContext.timer.getTestTime();
         var id = Number(this.parentNode.getAttribute('trackIndex'));
         audioEngineContext.audioObjects[id].metric.moved(time, this.value);
         console.log('slider ' + id + ' moved to ' + this.value + ' (' + time + ')');

             audioEngineContext.stop();
         }
     };
     this.resize = function (event) {
         this.holder.style.width = window.innerWidth - 200 + 'px';
-        this.slider.style.width = window.innerWidth - 420 + 'px';
     };
     this.enable = function () {
         // This is used to tell the interface object that playback of this node is ready
         this.play.disabled = false;
         this.play.textContent = "Play";

 function resizeWindow(event) {
     // Called on every window resize event, use this to scale your page properly
 
     var numObj = document.getElementsByClassName('track-slider').length;
     var totalHeight = (numObj * 125) - 25;
-    document.getElementById('scale-holder').style.width = window.innerWidth - 220 + 'px';
     // Cheers edge for making me delete a canvas every resize.
     var canvas = document.getElementById('scale-canvas');
     var new_canvas = document.createElement("canvas");
     new_canvas.id = 'scale-canvas';
     new_canvas.style.marginLeft = "100px";