In Shiny, how can I use distinct colors for the two buttons of a range slider?

Question

Shiny makes use of the ion-rangeslider. I've been able to work out how to modify the slider's color and some of its other properties. The code below produces a regular slider with a green button and a range slider with red buttons.

I would like the two buttons on the range slider to have distinct colors. For instance, red and blue i.o. red and red. Is there a way to do this?

library(shiny)

ui <- fluidPage(
  sliderInput("test1",
              "Select a value:",
              min = 0,
              max = 50,
              value = 20),
  sliderInput("test2",
              "Select a range:",
              min = 0,
              max = 50,
              value = c(30, 40)),
  tags$style(type = "text/css",
             HTML(".js-irs-0 .irs-slider { width: 8px; height: 20px; top: 20px; background: green }",
                  ".js-irs-1 .irs-slider { width: 8px; height: 20px; top: 20px; background: red }"))
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

score 2 · Accepted Answer · answered Feb 22 '19 at 19:44

2

Looks like you were pretty close, just tweak the css and add a .from or .to class:

  # ...
  tags$style(type = "text/css",
             HTML(".irs-slider { width: 8px; height: 20px; top: 20px; background: green; }",
                  ".irs-slider.from { width: 8px; height: 20px; top: 20px; background: red; }",
                  ".irs-slider.to { width: 8px; height: 20px; top: 20px; background: orange; }"))

answered Feb 22 '19 at 19:44

JasonAizkalns

20,243
8
57
116

I ran into another issue. I tried to change the background color of the labels ("20", "30", and "40", above) by using `.irs-single { color: black; background: transparent }`. This affected the single slider but not the range slider. I then tried `.irs-single.to { color: black; background: transparent }` and `.irs-single.from { color: black; background: transparent } ` but that did not have an effect; the background color of the labels in the range slider remains blue. – user2363777 Feb 27 '19 at 15:49
@user2363777 sounds like a another question. I would post a new question with a new example with an example of the desired results. – JasonAizkalns Feb 27 '19 at 16:15

In Shiny, how can I use distinct colors for the two buttons of a range slider?

1 Answers1