Błyszczący korzysta z Ion-Rangeslider.

Próbuję zmienić formatowanie etykiet suwaka zasięgu. W poniższym kodzie .irs-single { color: black; background: transparent } usuwa domyślne niebieskie tło etykiety w zwykłym suwaku (górnym), ale nie ma wpływu na etykiety suwaka zasięgu (dołu).


shiny output

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)

Próbowałem dodać każdy z poniższych, bezpośrednio ukierunkowanych na suwak zasięgu:

  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 }

Ale etykiety Rang Slider wciąż wychodzą z ich domyślnym kolorem, niebieski:

shiny output


Nie jest to możliwe, na przykład, bezpośrednio celować do formatowania jednego z przycisków suwaka zasięgu:

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

shiny output

0
user2363777 27 luty 2019, 21:40

2 odpowiedzi

Najlepsza odpowiedź
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)

enter image description here

1
Stéphane Laurent 27 luty 2019, 19:24

W tags$style musisz zmienić .irs-single do .irs-from, .irs-to, .irs-single, aby wpłynąć na suwak zasięgu w obu suwnicach.

Więc używając swojego kodu ze zmianą {x0}} do .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)

Produkuje to przezroczyste zasięg suwaków:

enter image description here

1
Miha 27 luty 2019, 19:43