diff --git a/definitions/base.js b/definitions/base.js
index b11acff6..8d4076d7 100644
--- a/definitions/base.js
+++ b/definitions/base.js
@@ -8196,7 +8196,7 @@ module.exports = function(s,config,lang){
                               "divContent": `
                                   <div id="studio-time-ticks"></div>
                                   <div id="studio-seek-tick"></div>
-                                  <div id="studio-slice-selection"></div>
+                                  <div id="studio-slice-selection" style="width: 80%;left: 10%;"></div>
                               `,
                            },
                        ]
diff --git a/web/assets/css/bs5.studio.css b/web/assets/css/bs5.studio.css
index 9d9f98c7..9114275e 100644
--- a/web/assets/css/bs5.studio.css
+++ b/web/assets/css/bs5.studio.css
@@ -13,8 +13,6 @@
     background: rgb(216 230 249 / 70%);
     border-radius: 5px;
     position: absolute;
-    width: 80%;
-    left: 10%;
     cursor: e-resize;
 }
 #studio-time-ticks {
diff --git a/web/assets/js/bs5.studio.js b/web/assets/js/bs5.studio.js
index ed763b27..b350896c 100644
--- a/web/assets/js/bs5.studio.js
+++ b/web/assets/js/bs5.studio.js
@@ -62,7 +62,7 @@ $(document).ready(function(){
         return `${roundedValue}`.length === 1 ? `0${roundedValue}` :  roundedValue
     }
     function getTimeInfo(timePx){
-        var timeDifference = loadedVideoForSlicer.amountOfSecondsBetween
+        var timeDifference = loadedVideoElement.duration
         var timePercent = timePx / stripWidth * 100
         var timeSeconds = (timeDifference * (timePercent / 100))
         // var timeMinutes = parseInt(timeSeconds / 60)
@@ -77,7 +77,7 @@ $(document).ready(function(){
         }
     }
     function getSliceSelection(){
-        var amountOfSecondsBetween = loadedVideoForSlicer.amountOfSecondsBetween
+        var amountOfSecondsBetween = loadedVideoElement.duration
         //
         var startTimePx = timelineStripSliceSelection.position().left
         var startTimeInfo = getTimeInfo(startTimePx)
@@ -102,7 +102,7 @@ $(document).ready(function(){
         })
     }
     function drawTimeTicks(video){
-        var amountOfSecondsBetween = loadedVideoForSlicer.amountOfSecondsBetween
+        var amountOfSecondsBetween = loadedVideoElement.duration
         var tickDivisor = amountOfSecondsBetween > 60 * 60 ? 500 : amountOfSecondsBetween > 60 ? 100 : amountOfSecondsBetween > 30 ? 20 : 2
         var numberOfTicks = amountOfSecondsBetween / tickDivisor
         var tickStripWidth = timelineStripTimeTicksContainer.width()
@@ -124,7 +124,7 @@ $(document).ready(function(){
         loadedVideoElement = videoElement[0]
     }
     function updateSeekTickPosition(){
-        const percentMoved = loadedVideoElement.currentTime / loadedVideoForSlicer.amountOfSecondsBetween * 100
+        const percentMoved = loadedVideoElement.currentTime / loadedVideoElement.duration * 100
         seekTick.css('left',`${percentMoved}%`)
     }
     function setSeekRestraintOnVideo(){
@@ -189,9 +189,8 @@ $(document).ready(function(){
         loadedVideoForSlicer = Object.assign({},video)
         var startTime = new Date(loadedVideoForSlicer.time)
         var endTime = new Date(loadedVideoForSlicer.end)
-        loadedVideoForSlicer.amountOfSecondsBetween = (endTime - startTime) / 1000
-        drawTimeTicks(video)
         createVideoElement(video)
+        drawTimeTicks(video)
         completedVideosList.empty()
         setSeekRestraintOnVideo()
     }