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

Question

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

我希望范围滑块上的两个按钮具有不同的颜色。例如，红色和蓝色红色和红色。有办法吗？

---

---

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