0

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

EOShaugh
  • 41
  • 3
  • Hi, please make your example [minimal and reproducible](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). In your case, you need to show the minimal code to launch a shiny app. – bretauv Jun 29 '20 at 17:03
  • Thanks, added a reproducible example showing that irs.single does not work in this case. – EOShaugh Jun 30 '20 at 19:05

1 Answers1

0

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)
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Not quite. The irs.min and max format the labels at either extreme of the slider. I want to format the tabs above the min and max of the slider. These show up as little light blue rectangles hidden behind the green circles in the image of my post, that is what I am trying to format but cannot access. – EOShaugh Jun 30 '20 at 18:59