Adding CSS to end labels in slider range in R Shiny

Question

I am trying to format the min/max labels on a sliderInput with a range. When there is a single value, you can achieve this in css using irs.single, for example:

library(shiny)

CSS <- ".irs-single { color: #1a3f58 ; background:white; }"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  sliderInput("slider", "Slide me",min = 0, max = 1000, value = c(500,600)
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

But that does not work for a slider range. Everything else works, the slider icons for example, it is just the min/max labels that retain the default format. The image shows the problem. The two labels behind the icon are hidden and retain the default format. I need to format those in css to change the color and the z-index so that they end up above the icons.

enter image description here

Hi, please make your example minimal and reproducible. In your case, you need to show the minimal code to launch a shiny app. — bretauv
Thanks, added a reproducible example showing that irs.single does not work in this case. — EOShaugh

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2020-06-30T10:13:58

Use .irs-min and .irs-max:

CSS <- "
.irs-min, .irs-max {
  background-color: yellow;
}"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  sliderInput("slider", "Slide me",
              min = 0, max = 1000, value = c(500,600)
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Adding CSS to end labels in slider range in R Shiny

1 Answers