如何更改闪亮的 sliderInput 旋钮（拇指）颜色？

Question

我正在尝试更改 sliderInput knob/thumb 颜色。在网上查了一下，我看到了一些关于使用 .irs-slider 的评论。但是，它在以下代码中对我不起作用：


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)

此代码更改了除旋钮以外所有内容的颜色。任何帮助，将不胜感激。

更新：感谢@Domingo 的回答。下面的代码也会改变旋钮。但是，当我点击旋钮移动它时，它变成白色。如何在单击时将旋钮颜色更改为不同的颜色（不是红色），例如黑色？

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)

Answer 1

您可以将.irs-handle class添加到您的样式中以更改旋钮的css:

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;
       }
      .irs-handle {
          background: cyan !important;
      }
      .irs-handle:active {
          background: green !important;
      }
      ")),
  
  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)

如何更改闪亮的 sliderInput 旋钮（拇指）颜色？

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

javascript

css

r

slider

shiny