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

Question

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

我希望范围 slider 上的两个按钮具有不同的颜色。例如，红色和蓝色 i.o.红色和红色。有办法做到这一点吗？

---

---

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 并添加 .from 或 .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; }"))