Synced timelines

Code

<script setup lang="ts">
  import {  } from 'vue';

  const  = (null);

  const  = [
    { : '1', : 'range', : { '--item-background': 'var(--color-2)' }, : 100000, : 450000 },
    { : '2', : 'range', : { '--item-background': 'var(--color-4)' }, : 450000, : 600000 },
    { : '3', : 'range', : 600000, : 800000 },
  ];

  const  = ({ : 400000, : 700000 });
  const  = ({ : 0, : 800000 });

  let  = false;
  let  = 0;

  function  ({ , ,  }) {
    if (.type === 'pointerdown') {
      if (?.id !== 'selection') {
        return;
      }

       = true;
       = ;
    }
    else if (.type === 'pointermove') {
      if (!) {
        return;
      }

      const  =  - ;
      const  = .. - ..;
      if ( < 0) {
        .. = .(.. + , ..);
        .. = .. + ;
      }
      else {
        .. = .(.. + , ..);
        .. = .. - ;
      }
       = ;
    }
  }

  .('pointerup', () => {
     = false;
  }, { : true });

  function  (: WheelEvent) {
    .?.onWheel();
  }
</script>

<template>
  <
    ="[..., { : 'selection', : 'background', : ., : . }]"
    ="[{: '1'}, {: '2'}, {: '3'}]"
    ="."
    ="."
    ="."
    ="map"
    @=""
    @=""
    @=""
  />

  <
    =""
    =""
    ="[{: '1'}, {: '2'}, {: '3'}]"
    ="."
    ="."
    ="."
    ="."
    @=" = "
  />
</template>

<style lang="scss" scoped>
  .map {
    --group-items-height: .5em;
    --group-border-top: 0;
    --label-padding: 0;
    --group-padding-top: .1em;
    --group-padding-bottom: .1em;

    :deep(.group:first-of-type) {
      padding-top: 1rem;
    }

    :deep(.group:nth-of-type(3)) {
      padding-bottom: 1rem;
    }

    :deep(.background)  {
      --item-background: color-mix(in srgb, currentcolor, transparent 90%);

      cursor: pointer;
      z-index: 1;
    }

    :deep(.item)  {
      pointer-events: none;
    }
  }
</style>