Change the min and max font color of sliderInput() range numbers

Viewed 97

Is it possible to change the font color of the min and max numbers of a sliderInput() like in the rest of the text in it and make it white?

library(shiny)

ui <- fluidPage(
  tags$head(
  tags$style(HTML(type = "text/css", "
      .irs-grid-text {font-family: 'arial'; color: white !important; bottom: 17px; z-index: 1; }
    "))),
  sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)

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

shinyApp(ui = ui, server=server)
1 Answers

Just use .irs-min and .irs-max that are the classes of theses elements in the HTML:

ui <- fluidPage(
  tags$head(
    tags$style(HTML(type = "text/css", "
                    .irs-grid-text {font-family: 'arial'; color: white !important; bottom: 17px; z-index: 1; }
                    .irs-min {font-family: 'arial'; color: white !important; bottom: 17px; z-index: 1; }
                    .irs-max {font-family: 'arial'; color: white !important; bottom: 17px; z-index: 1; }
                    "))),
  sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
    )

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

shinyApp(ui = ui, server=server)

To find out the class of an element, right click it and select "Inspect" enter image description here enter image description here

Related