css - 在 Shiny 中，如何更改范围 slider 标签的格式？

Question

Shiny 使用 ion-rangeslider .

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

---

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)

---

我尝试添加以下各项，直接针对范围 slider :

1. .js-irs-1 .irs-single { 颜色:黑色；背景:透明
2. .js-irs-1 .irs-single.to { 颜色:黑色；背景:透明
3. .js-irs-1 .irs-single.from { 颜色:黑色；背景:透明

但是 rang slider 的标签仍然以默认颜色蓝色出现:

---

例如，并不是说可以直接针对其中一个范围 slider 按钮的格式设置:

.js-irs-1 .irs-slider.to { 背景:红色 }

Answer 1

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

因此，使用您的代码将 .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)

产生这个透明的 slider 范围: