diff --git a/components/sequencer.vue b/components/sequencer.vue
index d485ef8..0200cc0 100644
--- a/components/sequencer.vue
+++ b/components/sequencer.vue
@@ -1,8 +1,8 @@
 <template>
-  <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
+  <section class="sequencer" >
     <!--<span class="sequence-controls-wrapper">-->
     <div class="options-wrapper">
-      <span class="control-bar" :class="[{'transparentBar': barIsTransparent}]">
+      <span class="control-bar" :style="{ opacity: barOpacity }">
         <div class="sequence-options">
           <div class="option-icon" id="icon-slots"></div>
           <div class="option-icon" id="icon-euclid"></div>
@@ -10,9 +10,9 @@
           <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), setTransparency()" ></range-slider>
+          <range-slider class="slider" @change="setFullOpacity()" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
           <input id="pulseSlider"/>
-          <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
+          <range-slider class="slider" @change="setFullOpacity()" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
           <input id="pulseSlider" value="3" />
         </div>
       </span>
@@ -51,6 +51,20 @@
           this.line.euclideanList = this.bjorklund(this.line.slotSlider, this.line.pulseSlider);
           return this.line;
       },
+      watch: {
+        'slotSlider': function(){
+          this.barIsTransparent = true;
+        },
+        'pulseSlider': function(){
+          this.barIsTransparent = true;
+        },
+        'slotSlider': function(){
+            this.barOpacity = 0.5;
+        },
+        'pulseSlider': function(){
+            this.barOpacity = 0.5;
+        }
+      },
       components: {
         RangeSlider,
         beat
@@ -62,8 +76,9 @@
         hideControls: function (){
           this.controlIsDisplayed = false;
         },
-        setTransparency: function (){
-          this.barIsTransparent = true;
+        setFullOpacity: function (){
+          this.barOpacity = 1;
+          console.log("fullOPacity");
         },
         bjorklund: function (slots, pulses) {
 
@@ -205,10 +220,6 @@
   overflow-x: auto;
 }
 
-.transparentBar{
-  opacity:0.5;
-}
-
 .sequence-bar{
   display:none;
 }
diff --git a/pages/index.vue b/pages/index.vue
index bac0bf9..08c074a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -45,7 +45,8 @@ export default {
         slotSlider: 16,
         pulseSlider: 3,
         euclideanList: [],
-        barIsTransparent: false });
+        barOpacity:1
+      });
     },
     getSequencerData: function(){
       var modelEsp = {