How to change title text color in Leaflet for R?

I'm trying to change the style / color of the heading for the slider title "Magnitudes", but I can't figure out what to do. I've tried adding things like p {color: red} to the tags$style line, like this:

  tags$style(type = "text/css", "html, body {width:100%;height:100%}", "p {color=white}"),

to no avail. Do you have any ideas? I don't think it's something you change in the actual sliderInput function itself, but rather CSS, I just can't quite figure it out.

library(shiny)
library(leaflet)
library(RColorBrewer)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10,
    sliderInput("range", "Magnitudes", min(quakes$mag), max(quakes$mag),
      value = range(quakes$mag), step = 0.1
    ),
    selectInput("colors", "Color Scheme",
      rownames(subset(brewer.pal.info, category %in% c("seq", "div")))
    ),
    checkboxInput("legend", "Show legend", TRUE)
  )
)

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

  # Reactive expression for the data subsetted to what the user selected
  filteredData <- reactive({
    quakes[quakes$mag >= input$range[1] & quakes$mag <= input$range[2],]
  })
  
  # This reactive expression represents the palette function,
  # which changes as the user makes selections in UI.
  colorpal <- reactive({
    colorNumeric(input$colors, quakes$mag)
  })
  
  output$map <- renderLeaflet({
    # Use leaflet() here, and only include aspects of the map that
    # won't need to change dynamically (at least, not unless the
    # entire map is being torn down and recreated).
    leaflet(quakes) %>% addTiles() %>%
      fitBounds(~min(long), ~min(lat), ~max(long), ~max(lat))
  })
  
  # Incremental changes to the map (in this case, replacing the
  # circles when a new color is chosen) should be performed in
  # an observer. Each independent set of things that can change
  # should be managed in its own observer.
  observe({
    pal <- colorpal()
    
    leafletProxy("map", data = filteredData()) %>%
      clearShapes() %>%
      addCircles(radius = ~10^mag/10, weight = 1, color = "#777777",
        fillColor = ~pal(mag), fillOpacity = 0.7, popup = ~paste(mag)
      )
  })
  
  # Use a separate observer to recreate the legend as needed.
  observe({
    proxy <- leafletProxy("map", data = quakes)
    
    # Remove any existing legend, and only if the legend is
    # enabled, create a new one.
    proxy %>% clearControls()
    if (input$legend) {
      pal <- colorpal()
      proxy %>% addLegend(position = "bottomright",
        pal = pal, values = ~mag
      )
    }
  })
}

shinyApp(ui, server)

Solution

Cutting straight to the chase:

Try adding this to your ui:

tags$style(type = "text/css", 'label[for="range"] {color: white;}'),

More detail about how you might figure that out on your own:

Here's how I'd proceed.

Use runApp() to run the code you've got, producing a very nice leaflet map in your browser.
Right-click on that map and select "View Page Source" to see the source code that's producing the map.
Search that source for the string "Magnitude", to find the HTML element that codes for the title you'd like to whiten. Here's what I find when I do that:
```
<label class="control-label" for="range">Magnitudes</label>
```
From that, construct a CSS selector (here including an "attribute selector") that'll find that element, and use it to change the color. Adding this, following the first line of your call to bootstrapPage(), does the trick for me:
```
tags$style(type = "text/css", 'label[for="range"] {color: white;}'),
```
Use runApp() again to confirm that the edit worked.