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

Question

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

我希望范围滑块上的两个按钮具有不同的颜色。例如，红色和蓝色 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 class:

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

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

In Shiny, how can I use distinct colors for the two buttons of a range slider?

css

r

rangeslider

shiny

ion-range-slider