Change colour for sliderInput

Question

This is how my shiny app looks like:

The blue slider looks bad with the red navbar. Does anyone know how to change it to red? I'm using shinytheme("united").

Answer 1

This is similar to @LyzandeR answer, but uses simpler code and doesn't use any additional packages

library(shiny)

mycss <- "
.irs-bar,
.irs-bar-edge,
.irs-single,
.irs-grid-pol {
  background: red;
  border-color: red;
}
"

ui <- fluidPage(
  tags$style(mycss),
  sliderInput("num", "Number", 0, 10, 5)
)

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

shinyApp(ui, server)

Answer 2

It is not the easiest task, but it can happen. All you need to do is change the CSS of the default bootstrap theme that shiny uses by default. I will use tableHTML (allows you add a CSS file to shiny from the ui) to show you which CSS to change:

library(tableHTML)
ui <- fluidPage(
 tags$style(make_css(list('.irs-bar', 
                          c('border-top', 'border-bottom', 'background'), 
                          rep('red', 3)),
                     list('.irs-bar-edge',
                          c('background', 'border'),
                          c('red', '0px !important')),
                     list('.irs-single',
                          'background',
                          'red'))),
 sliderInput("obs", "Number of observations:",
             min = 0, max = 1000, value = 500
 ),
 plotOutput("distPlot")
)

# Server logic
server <- function(input, output) {
 output$distPlot <- renderPlot({
  hist(rnorm(input$obs))
 })
}

# Complete app with UI and server components
shinyApp(ui, server)
}

As you can see above (in the make_css function) you need to change .irs-bar, .irs-bar-edge and .irs-single and add whichever colour you want. I used the standard red. You can find a tutorial on tableHTML::make_css here if you want to find out more.