Add bar-transparency on slider drag

components/sequencer.vue

@@ -2,7 +2,7 @@
   <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
     <!--<span class="sequence-controls-wrapper">-->
     <div class="options-wrapper">
-      <div class="control-bar">
+      <span class="control-bar" :class="[{'transparentBar': barIsTransparent}]">
         <div class="sequence-options">
           <div class="option-icon" id="icon-slots"></div>
           <div class="option-icon" id="icon-euclid"></div>
@@ -10,12 +10,12 @@
           <div class="option-icon" id="icon-delete"></div>
         </div>
         <div class="sequence-bar">
-          <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
+          <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
           <input id="pulseSlider"/>
-          <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
+          <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
           <input id="pulseSlider" value="3" />
         </div>
-      </div>
+      </span>
     </div>
     <div class="sequencerLine">
         <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
@@ -61,11 +61,10 @@
         },
         hideControls: function (){
           this.controlIsDisplayed = false;
-        }
-        /*,
-        barOpacity: function (){
-          this.setOpacity = true;
-        }*/,
+        },
+        setTransparency: function (){
+          this.barIsTransparent = true;
+        },
         bjorklund: function (slots, pulses) {
 
       var pattern = [],
@@ -206,6 +205,10 @@
   overflow-x: auto;
 }
 
+.transparentBar{
+  opacity:0.5;
+}
+
 .sequence-bar{
   display:none;
 }

pages/index.vue

@@ -45,7 +45,7 @@ export default {
         slotSlider: 16,
         pulseSlider: 3,
         euclideanList: [],
-        controlIsDisplayed: false });
+        barIsTransparent: false });
     },
     getSequencerData: function(){
       var modelEsp = {