get reactive sliders to use css style tags in R Shiny instead of ignoring them

Question

I have reactive sliders where I want the bars to be red. However, the bars are ignoring my CSS style tags, although the bars do shorten when I put in the argument (compare the first and second bars length in screenshot). How do I get them to follow my tags?

Reproducible example (note: in the final answer, I need both sliders to be red--I only put my code in the first one to show that the section responds just by shortening the slider's length):

library(shiny)
library(shinyWidgets)



ui <- fluidPage(
    
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit"),
            
            uiOutput("num_slider"),
            uiOutput("num_slider2"),
            
            
        ),
        mainPanel(DT::DTOutput("table"))
    ))

server <- function(input, output) {
    
    
        data <- reactive({
            req(input$submit)
            if(input$greeting == "hi!") {
            tibble(name = c("Justin", "Corey", "Sibley"),
                       grade = c(50, 100, 100))}
        })
        
        output$table <- renderDT({
            datatable(data())
        })
        

        output$num_slider <- renderUI({
            fluidPage(
                #Slider ignores the style tags--just makes the bar shorter
                tags$style(
                    ".irs-bar {",
                    "  border-color: red;",
                    "  background-color: red;",
                    "}",
                    ".irs-bar-edge {",
                    "  border-color: red;",
                    "  background-color: red;",
                    "}"
                ),
            if(length(data()) > 0) {
                          sliderInput(inputId = "num_filter2",
                                      label = "Filter by Number",
                                      min = 1,
                                      max = 10,
                                      value = c(1, 10))})
            
        })
        
        output$num_slider2 <- renderUI({
            
            if(length(data()) > 0) {
                          sliderInput(inputId = "num_filter2",
                                      label = "Filter by Number",
                                      min = 100,
                                      max = 10000,
                                      value = c(100, 10000))}
            
        })
    
}

# Run the application 
shinyApp(ui = ui, server = server)

Note the different slider bar lengths. That's not a problem, but it shows that the app is responding, in some way, to my code, even if it isn't making them red. I've also tried using shinyWidget's setSliderColor(), but it only works on one slider.

Answer 1

Try this

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
  sidebarLayout(
    sidebarPanel(
      textInput(inputId = "greeting",
                label = "Say hi!"),
      actionButton(inputId = "submit", 
                   label = "Submit"),
      
      uiOutput("num_slider") #,
      #uiOutput("num_slider2")
    ),
    mainPanel(DTOutput("table"))
  ))

server <- function(input, output) {
  
  data <- reactive({
    req(input$submit)
    if(input$greeting == "hi!") {
      tibble(name = c("Justin", "Corey", "Sibley"),
             grade = c(50, 100, 100))}
  })
  
  output$table <- renderDT({
    datatable(data())
  })
  
  
  output$num_slider <- renderUI({
    if (is.null(data())) return()
    tagList(
      tags$head(
        tags$style(type="text/css", ".slider1 label{ display: table-cell; text-align: left; vertical-align: middle; }
                                     .slider1 .irs-bar {border-color: red; background-color: orange;}
                                     .slider1 .irs-bar-edge { border-color: red; background-color: red;}")
      ),
      tags$div(id = "slider1", class="slider1", style="width:25vw;",
               sliderInput(inputId = "num_filter1",
                           label = "Filter by Number",
                           min = 1,
                           max = 10,
                           value = c(1, 10))
      ),
      tags$div(id = "slider2", class="slider1", style="width:25vw;",
               sliderInput(inputId = "num_filter2",
                           label = "Filter by Number",
                           min = 1,
                           max = 10,
                           value = c(1, 10))
      )
    )
  })
  
  # output$num_slider2 <- renderUI({
  #   
  #   if(length(data()) > 0) {
  #     sliderInput(inputId = "num_filter2",
  #                 label = "Filter by Number",
  #                 min = 100,
  #                 max = 10000,
  #                 value = c(100, 10000))}
  #   
  # })
  
}

# Run the application 
shinyApp(ui = ui, server = server)