'How to change the sliderInput knob (thumb) color in shiny?

I am trying to change the sliderInput knob/thumb color. Checked online and I saw some comments about using .irs-slider. However, it does not work for me in the following code:


library(shiny)
ui <- fluidPage(
  tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar, .js-irs-0 .irs-slider {background: red}")),

  sliderInput("slider1", "Slider 1",min = 0.1, max = 1, value = 0.4, step = 0.05),

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

This codes changed the color of everything except for the knob. Any help would be appreciated. enter image description here

UPDATE: Thanks to @Domingo for his answer. The following code will change the knob too. However, when I click on the knob to move it, it turns to white color. How can I change the knob color on click to a different color (not red) e.g. black?

library(shiny)
ui <- fluidPage(
  tags$style(
    HTML(
      ".js-irs-0 .irs-single, 
       .js-irs-0 .irs-bar-edge, 
       .js-irs-0 .irs-bar, 
       .js-irs-0 .irs-handle
       {
          background: red;
       }
      ")),
  
  sliderInput("slider1", 
              "Slider 1",
              min = 0.1, 
              max = 1, 
              value = 0.4, 
              step = 0.05),
  
)
server <- function(input, output, session){}
shinyApp(ui = ui, server=server)
javascriptcssrshinyslider


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions