在 Shiny 中，如何更改范围滑块标签的格式？

Question

Shiny 使用 ion-rangeslider。

我正在尝试更改范围滑块标签的格式。在下面的代码中，.irs-single { color: black; background: transparent } 删除了常规滑块（顶部）中标签的默认蓝色背景，但它对范围滑块（底部）的标签没有影响。

---

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(
               ".irs-single { color: black; background: transparent }")
             )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

---

我尝试添加以下各项，直接针对范围滑块：

1. .js-irs-1 .irs-single { color: black; background: transparent }
2. .js-irs-1 .irs-single.to { color: black; background: transparent }
3. .js-irs-1 .irs-single.from { color: black; background: transparent }

但是范围滑块的标签仍然以默认颜色蓝色显示：

---

不是说有可能，例如，直接定位范围滑块按钮之一的格式：

.js-irs-1 .irs-slider.to { background: red }

Answer 1

在 tags$style 中，您需要将 .irs-single 更改为 .irs-from, .irs-to, .irs-single 以影响两个滑块中的范围滑块。

所以使用您的代码将 .irs-single 更改为 .irs-from, .irs-to, .irs-single

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(
               ".irs-from, .irs-to, .irs-single { color: black; background: transparent }")
             )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

生成此透明滑块范围：

Answer 2

library(shiny)

css <- "
.irs-from, .irs-to { color: black; background: transparent }
"

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(css))
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)