@@ -9,6 +9,8 @@

 {% block main %}

     <div class="tl_panel">

         <div id="vr-daily-schedule-zoom" class="tl_submit_panel">

+            <label for="daily-zoom-slider">Zoom</label>

+            <input type="range" id="daily-zoom-slider" min="1.5" max="9" step="1.5" value="3">

             <button id="daily-zoom-in" class="tl_submit">+</button>

             <button id="daily-zoom-out" class="tl_submit">-</button>

             <button id="daily-zoom-reset" class="tl_submit" data-default="3">Reset</button>

@@ -35,8 +37,17 @@

                     {

                         root.style.setProperty('--slot-height',defaultZoom);

                     }

+                    zoomPanel.querySelector('#daily-zoom-slider').value = parseFloat(rootStyles.getPropertyValue('--slot-height'));

                 });

             });

+

+            zoomPanel.querySelector('#daily-zoom-slider').addEventListener('input',(event) => {

+                let currentVal = rootStyles.getPropertyValue('--slot-height');

+                let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);

+                [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

+

+                root.style.setProperty('--slot-height',event.target.value + unit);

+            });

         </script>

     </div>

     <div class="vr-daily-schedule">

@@ -9,8 +9,13 @@ $time-color: #666;

 $text-color: #333;

 $header-bg-color: #f2f2f2;

 $slot-height: 3rem;

+$slot-animation-duration: .25s;

 $cell-amount: 48;

+@mixin animate-slot {

+  transition: height $slot-animation-duration ease-in-out, line-height $slot-animation-duration ease-in-out, grid-template-rows $slot-animation-duration ease-in-out;

+}

+

 :root {

   --slot-height: #{$slot-height};

 }

@@ -43,6 +48,7 @@ $cell-amount: 48;

     position: relative;

     padding-inline-end: 8px;

     text-align: right;

+    @include animate-slot;

     &:first-child {

       .daily-timeline-label {

@@ -77,6 +83,7 @@ $cell-amount: 48;

     .line {

       height: var(--slot-height);

+      @include animate-slot;

       &:after {

         content: "";

@@ -109,9 +116,11 @@ $cell-amount: 48;

       width: 100%;

       display: grid;

       grid-template-rows: repeat($cell-amount, calc(var(--slot-height) / (#{$cell-amount} / 24)));

+      @include animate-slot;

       .event-cell {

         line-height: calc(var(--slot-height) / 4);

+        @include animate-slot;

         z-index: 2;

         box-sizing: border-box;

         border-radius: 5px;