Shiny Changing Slider Animation Speed

Question

I was wondering if there is a way to change the animation speed of a slider in shiny. So, for a slider that is (in ui.R) :

sliderInput("test_slider", 
            "Animation:", 
             min = 1, 
             max = 200, 
             value = 100, 
             animate = animationOptions(interval = ANIMATION SPEED))

I want to be able to change ANIMATION SPEED rather than keeping it at a static value that I set in the beginning. Also, the animation only works when I put it in the ui, so I can't make it a reactive UI in the server. For example, I can't do in server.R

output$test_slider <- renderUI({
   sliderInput("test_slider", 
               "Animation:", 
                min = 1, 
                max = 200, 
                value = 100, 
                animate = animationOptions(interval = ANIMATION SPEED))
})

and then add in ui.R

uiOutput("test_slider")

This would have been ideal since I customize things like min and max (and probably ANIMATION SPEED ), but unfortunately doing it this way makes it so the play button doesn't work and the animation just doesn't start. I am at a loss for how to dynamically change slider input parameters. Even if your solution involves javascript, I would be totally fine with that. Thank you so much.

---

EDIT:

So I don't have an answer yet, but I've gotten closer. I looked through the javascript file and added something like this (in ui.R):

         numericInput("anim",
                      "interval: ",
                      value = 100),
         sliderInput("test_slider",
                    "Animation",
                     min = 1,
                     max = 200,
                     value = 100,
                     step = 1,
                     animate = animationOptions(interval = 700,
                               playButton = icon('play', "fa-3x"),
                               pauseButton = icon('pause', "fa-3x"))),
        singleton(
          tags$head(tags$script('Shiny.addCustomMessageHandler("testmessage",
                function(message) {$(this).attr("data-interval", message.interval); 
                                console.log($(this).attr("data-interval"))});'))
          )

I have the console.log just to show that I am sending the right thing since it is printing the correct value in the terminal. Then I do in server.R:

  observe({
    if(!is.null(input$anim)) {
      session$sendCustomMessage(type = "testmessage", 
                                message = list(interval = input$anim,
                                         controller = input$test_slider))
    }
  })

I am using both the documentation in the shiny repo here: https://github.com/rstudio/shiny/blob/a6cd0fdb85d5d2175ebc4fcb590386e4cedcbbd9/srcjs/input_binding_slider.js

as well as the documentation found on this blog here: https://ryouready.wordpress.com/2013/11/20/sending-data-from-client-to-server-and-back-using-shiny/

The one for the github repo I'm using the part below where it says

animInterval = self.attr("data-interval")

where

 var self = $(this)

I've never really used javascript before, so I could be missing something obvious. Any help is greatly appreciated!

Answer 1

I'm not sure if I understand your issue but if I do the following will work :

In server.R :

output$slider_to_anim <- renderUI({
  sliderInput("slider", 
           "Animation:", 
            min = 1, 
            max = 200, 
            value = 100, 
            animate = animationOptions(interval = input$speed))
})

output$speed_value <- renderUI({
  numericInput("speed","Speed Value :",value = 100)
})

And add in ui.R :

uiOutpout("slider_to_anim"),
uiOutpout("speed_value")