css - 在 Shiny 中，如何为范围滑块的两个按钮使用不同的颜色？

Question

Shiny 使用了ion-rangeslider。我已经能够弄清楚如何修改滑块的颜色和它的一些其他属性。下面的代码生成一个带有绿色按钮的常规滑块和一个带有红色按钮的范围滑块。

我希望范围滑块上的两个按钮具有不同的颜色。例如，红色和蓝色 io 红色和红色。有没有办法做到这一点？

---

---

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)

Answer 1

看起来你已经很接近了，只需调整 css 并添加一个.fromor.to类：

  # ...
  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; }"))