How to refresh sliderInput() in Shiny in real time (not only when the sliding ends)?

Question

Sorry, I don't know if the question is clear enough: In Shiny, every time the slider is sliding, it will only calculate and update the value at the end of the sliding. If I link its value to the chart, it doesn't look very smooth when sliding (the chart will only change when the mouse is released or after seconds, rather than keep changing with the sliding).

Use the slide bar to change the y, and the red point's position in the chart will be changed.

Input and Chart

Part of my code is as follows:

In ui.R:

sliderInput("slider_mean", 
HTML("Try to change the value of ŷ:"),
min = 1, max = 200, value = 100,width="30%"),

plotlyOutput('meanplot'),

In server.R:(This code may not be complete, just to give an example)

  output$meanplot <- renderPlotly({
    
    meantb <- data.frame(y_hat = 1:200) %>%
      mutate(col2 =(y_mean1()-y_hat)^2+(y_mean2()-y_hat)^2+(y_mean3()-y_hat)^2+(y_mean4()-y_hat)^2+(y_mean5()-y_hat)^2+(y_mean6()-y_hat)^2)

    #Here is to input the slider value
    highlight_adjust <- meantb %>% 
      filter(y_hat %in% input$slider_mean)
    
    p=ggplot(meantb,
           aes(x = y_hat, y = col2)) + 
      
      geom_point(size =0.7,color="black") +
      
      geom_point(data=highlight_adjust, 
                 aes(x = y_hat, y = col2), 
                 color='red')+

      geom_line(size = 0.2,color="black") +
    ggplotly(p)
  })

The example from Shiny:

https://shiny.rstudio.com/gallery/slider-bar-and-slider-range.html

If we move the slider bar quickly, the output value will have a delay.

Answer 1

After reading some of the source code of sliderInput I found out that the default debounce behavior (cf. to the getRatePolicy section of this article) of the slider is only adhered to in absence of a data-immediate attribute in the HTML code.

That is, we just need to add this attribute to the HTML and the slider reacts instantly.

Note. If you look into the source code referenced before, you will see that receiveMessage will reset immediate to false. receiveMessage is called whenever we use updateSliderInput. Thus, after calling updateSliderInput we have to re-assign the immediate data attribute in order to still see the behaviour.

In the example below you see that the values of the hacked slider are updated instantaneously, while the second slider shows default behavior. A click on update will turn of this behavior as sort of collateral damage and in case you want to use updateSliderInput, you should make sure that the data-immediate attribute is added again (the code for the reset button shows one possible way to do so).

Be, however, aware that there is most likely a reason why the shiny team did not expose this functionality to the end user, so this solution should be regarded as a hack and used with care. (Judging from the source code, they use the immediate attribute to overrule the default rate policy when using updateSliderInput(and thus receiveMessage).

library(shiny)
library(shinyjs)

my_sld <- function(...) {
   sld <- sliderInput(...)
   sld$children[[2]]$attribs$`data-immediate` <- "true"
   sld
}

shinyApp(
   fluidPage(
      useShinyjs(),
      my_sld("sld1", "Immediate:", 1, 10, 1), 
      verbatimTextOutput("dbg1"),
      sliderInput("sld2", "Debounced:", 1, 10, 1),
      verbatimTextOutput("dbg2"),
      actionButton("update", "Update kills Immediateness"),
      actionButton("reset", "Re-add immediate attribute")
      ),
   function(input, output, session) {
      output$dbg1 <- renderPrint(input$sld1)
      output$dbg2 <- renderPrint(input$sld2)
      observeEvent(input$update, {
         updateSliderInput(session, "sld1", value = 8)
      })
      observeEvent(input$reset, {
         runjs("$('#sld1').data('immediate', true);")
      })
   })