UpdateSliderInput defaults to 'pause' when a value changes

Viewed 207

I have created a shiny app and it works absolutely fine. But the only problem I have is that every time the speed or interval size is changed, the slider 'pauses'. Conversely, if I use an actionButton instead, the animation continues.

I would like to give the user a finer control over the animation and so I am using a slider/numericInput instead. But I want the sliderInput to accept the user defined value and start playing the animation with the new value. Like the speed control on YouTube.

Here is my code a sample from the bigger version of the code:

library(shiny)

minimum.slider <- as.POSIXct("2016-08-12  00:00:00", format = "%Y-%m-%d %H:%M:%S")
maximum.slider <- as.POSIXct("2016-08-30 05:29:00 UTC", format = "%Y-%m-%d %H:%M:%S")

ui <- fluidPage(
  titlePanel("tester"),
  sidebarLayout(
    sidebarPanel(id="sidebar",
                 uiOutput("slider"),
                 sliderInput("speed",
                             label = div(style='width:300px;',
                                         div(style='float:left;', 'slower'),
                                         div(style='float:right;', 'faster')),
                             min = 1, 
                             max = 10, 
                             value = 6, 
                             width = '300px'),
                 sliderInput("step_size","Time Steps (minutes):",
                             min = 10, max = 60, value = 1, width = '300px'),
                 actionButton("hour_3","3 hour jump")

    ),
    mainPanel(
      h4(textOutput("selectedtime"))
    )
  )
)

server <- function(input, output,session) {

  output$slider <- renderUI({

    ## MAIN slider input into the output. The step depends on user defined 'speed' and 'interval depends on user defined 'step size'
    sliderInput("timeRange", label = "Date/Time:", width = '600px',
                min = minimum.slider,
                max = maximum.slider,
                value = minimum.slider,
                step = (60*input$step_size),
                timezone = "UTC",
                animate = animationOptions(interval = 3200 - (input$speed*300),
                                           playButton = tags$img(height = 40,width = 45,
                                                                 src = "https://png.icons8.com/color/1600/circled-play", 
                                                                 tags$p(tags$b("PLAY"))),
                                           pauseButton = tags$img(height = 40, width = 45,
                                                                  src = "https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/512/Pause_button_play_stop_blue.png",
                                                                  tags$p(tags$b("PAUSE"))))
    )

  })

  observeEvent(input$speed,{
    val <- input$timeRange
    updateSliderInput(session, "timeRange",value=val)
  })

  observeEvent(input$speed,{
    val <- input$timeRange
    updateSliderInput(session, "timeRange",value=val)
  })

  observeEvent(input$hour_3,{
    val <- input$timeRange + 10800
    updateSliderInput(session, "timeRange",value=val)
  })

  ##OUTPUT
  observe({
    output$selectedtime <- renderText({
      paste(format(input$timeRange))
    })

  })
}
shinyApp(ui,server)

Thanks for your help.

0 Answers
Related