Color dynamic box() based on the value which comes from a widget inside the dynamic box() in a shiny app

Question

In the shiny app below I color the box based on the value of the sliderInput() which included inside the box(). The issue is that the box does not initially displayed if it does not have a value.

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$style(HTML("
                      
                      #mybox2Red{border-top-style: none; border-left-color: red; border-left-style: solid;}
                      #mybox2Green{border-top-style: none; border-left-color: green; border-left-style: solid;}
                      "))
      ),
    
    uiOutput("box2")
      )
      )


server <- function(input, output) { 
  
  
  output$box2<-renderUI({
    req(input$vr)
    if(input$vr<=5){
      tags$style(
        type = 'text/css',
        "#mybox2Red{border-top-style: none; border-left-color: red; border-left-style: solid;}"
      )
      box(
        id="mybox2Red",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T,
        sliderInput("vr","Set value range",min = 0,max=10,value =  5)
      )
    }
    else{
      tags$style(
        type = 'text/css',
        "#mybox2Green{border-top-style: none; border-left-color: green; border-left-style: solid;}"
      )
      box(
        id="mybox2Green",
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T,
        sliderInput("vr","Set value range",min = 0,max=10,value =  5)
        
      )
    }
  })
}

shinyApp(ui, server)

Answer 1

If you relay the value over a reactive value that can easily be done. Now you can initialize ValueRange outside of renderUI and you circumvent the issue this way.

I changed the renderUI a bit. Using the if the way you did requires maintaining the dame code twice. Unless you intend to add more differences to the 2 box states it will be a lot easier in the future (and easier to read). Now the condition changes only the box id. But - of course - you can ignore that if it does not make sense for what you have in mind.

Please note, that each update of the slider will collapse the box because of collapsed = T.

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$style(HTML("
      #mybox2Red{border-top-style: none; border-left-color: red; border-left-style: solid;}
      #mybox2Green{border-top-style: none; border-left-color: green; border-left-style: solid;}
      "))
    ),
    uiOutput("box2")
  )
)


server <- function(input, output) {
  ValueRange <- reactiveVal(5)
  
  observeEvent(input$vr, ValueRange(input$vr))
  
  output$box2 <- renderUI({
    req(ValueRange)

    box(
        id=ifelse(input$vr<=5, "mybox2Red", "mybox2Green"),
        title = "title", 
        closable = TRUE, 
        width = 10,
        status = "danger", 
        solidHeader = F, 
        collapsible = TRUE,
        collapsed = T,
        sliderInput("vr","Set value range", min = 0, max=10, value =  ValueRange())
      )
  })
}

shinyApp(ui, server)