В Shiny, как я могу изменить форматирование надписей слайдера диапазона?

Question

Shiny использует ion-rangelider .

Я пытаюсь изменить формат надписей ползунка диапазона.В приведенном ниже коде .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

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)

Answer 2

В 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)

Производит этот диапазон прозрачных ползунков: