How to make plotly secondary x axis to work with rangeslider?

Question

Context & problem:

I am trying to show the evolution of a value over time and some events that occured during the same period. One x-axis shows dates and I would like to get another x-axis, on top of the plot, that shows alternative tick-labels for dates i.e. events.

Here is a ggplot version of this plot:

library(ggplot2)
# here is a dummy dataset
df <- data.frame(
  timeaxis = seq.Date(from = as.Date.character("2020-01-01"), 
                      to = as.Date.character("2020-02-01"), 
                      by = "days"),
  avalue = runif(32)
)
# now I want to add a secondary axis to show events that occured during this time period
df_event <- data.frame(
  eventdate = as.Date.character(c("2020-01-05", "2020-01-17", "2020-01-20", "2020-01-25")),
  eventlabel = c("diner", "exam", "meeting", "payday")
)
# and the basic plot related to it
p <- ggplot(data = df, aes(x = timeaxis, y = avalue)) +
  geom_line()
# I can add a new axis like so:
p <- p + scale_x_date(sec.axis = sec_axis(
  ~ .,
  breaks = df_event$eventdate,
  labels = df_event$eventlabel
))
print(p)

^{Created on 2022-02-11 by the reprex package (v2.0.1)}

I need to use plotly for the awesome rangeslider that adds a very nice to use way to zoom in specific time periods.

Demo:

library(dplyr)
library(plotly)

plotly::ggplotly(p) %>% 
  plotly::layout(
    # as you can see the rangeslider is linked to xaxis, is it possible to link it to xaxis2?
    xaxis = list(rangeslider = list(visible = TRUE))
    )
  # note that using rangeslider() does not show the plot right...

As you can see, the second x-axis is not showing. Problem is that plotly does not have, yet, a good handling of secondary axis. First, if you use ggplot2::scale_x_date(sec.axis = ggplot2::sec_axis() to get a secondary x-axis, it is not transfered to the plotly plot by using plotly::ggplotly(). Second, if you manually define a secondary x-axis using plotly functions (as proposed here or there, this axis does not change according to the rangeslider (I guess because the rangeslider is actually bound to xaxis and should de defined for xaxis2 as well). Not to mention, I was not able to change the labels of the breaks to get the "events" displayed (even the example on

Demo:

plotly::ggplotly(p) %>%
  # making an invisible trace
  plotly::add_lines(
    data = df_event,
    x = ~ eventdate,
    y = 0,
    color = I("transparent"),
    hoverinfo = "skip",
    showlegend = FALSE,
    xaxis = "x2"
  ) %>%
  plotly::layout(
    xaxis = list(rangeslider = list(visible = TRUE)),
    xaxis2 = list(overlaying = "x", side = "top")
  )

And with the actual event labels:

plotly::ggplotly(p) %>%
  # making an invisible trace
  plotly::add_lines(
    data = df_event,
    x = ~ eventdate,
    y = 0,
    color = I("transparent"),
    hoverinfo = "skip",
    showlegend = FALSE,
    xaxis = "x2"
  ) %>%
  plotly::layout(
    xaxis = list(rangeslider = list(visible = TRUE)),
    xaxis2 = list(overlaying = "x", 
                  side = "top",
                  tickvals = df_event$eventdate,
                  ticktext = df_event$eventlabel)
  )

I tried to add matches = "x", anchor = "x", scaleanchor = "x" to xaxis2 list but nothing changed.

Question:

How to make a second axis in a plotly plot that reacts to "zoom" using rangeslider?

If you think there is a better way of achieving this, please go ahead! Any idea is very welcome, I am quite new to plotly and I certainly have overlooked its functionalities.