Jak kolorować suwak (sliderInput)?

Question

Próbowałem zrobić inny kolor dla kilku silderInput bar w R błyszczące. To wymaga css itp. Sprawdziłem online i mogę tylko znaleźć jak zrobić jeden silderInput. Jak mogę stworzyć kilka różnych kolorów dla różnych barów?

Oto mój kod testowy. To pokaże wszystkie bar w tym samym stylu:

ui <- fluidPage(
    tags$style(type = "text/css", " 
       .irs-bar {width: 100%; height: 25px; background: black; border-top: 1px solid black; border-bottom: 1px solid black;} 
       .irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 0px; width: 20px;} 
       .irs-line {border: 1px solid black; height: 25px; border-radius: 0px;} 
       .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;} 
       .irs-grid-pol {display: none;} 
       .irs-max {font-family: 'arial'; color: black;} 
       .irs-min {font-family: 'arial'; color: black;} 
       .irs-single {color:black; background:#6666ff;} 
       .irs-slider {width: 30px; height: 30px; top: 22px;} 

      .irs-bar1 {width: 50%; height: 25px; background: red; border-top: 1px solid black; border-bottom: 1px solid black;} 
       .irs-bar-edge1 {background: black; border: 1px solid red; height: 25px; border-radius: 0px; width: 20px;} 
       .irs-line1 {border: 1px solid red; height: 25px; border-radius: 0px;} 
       .irs-grid-text1 {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;} 
       .irs-grid-pol1 {display: none;} 
       .irs-max1 {font-family: 'arial'; color: red;} 
       .irs-min1 {font-family: 'arial'; color: red;} 
       .irs-single1 {color:black; background:#6666ff;} 
       .irs-slider1 {width: 30px; height: 30px; top: 22px;} 

      "), 

    uiOutput("testSlider") 
) 

server <- function(input, output, session){ 
    output$testSlider <- renderUI({ 
    fluidRow(
     column(width=3, 
      box(
       title = "Preferences", width = NULL, status = "primary", 
       sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%'), 
       sliderInput(inputId="test2", label=NULL, min=1, max=10, value=5, step = 1, width='50%') 
      )  
    )) 
    }) 
} 

shinyApp(ui = ui, server=server) 

Answer 1

Poniżej znajduje się przykładowy kod, w jaki sposób można modyfikować style z suwaków. Możesz dodać do niego swoją własną logikę.

rm(list = ls()) 
library(shiny) 
ui <- fluidPage(
    # All your styles will go here 
    tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: purple}")), 
    tags$style(HTML(".js-irs-1 .irs-single, .js-irs-1 .irs-bar-edge, .js-irs-1 .irs-bar {background: red}")), 
    tags$style(HTML(".js-irs-2 .irs-single, .js-irs-2 .irs-bar-edge, .js-irs-2 .irs-bar {background: green}")), 

    sliderInput("slider1", "Slider 1",min = 0.1, max = 1, value = 0.4, step = 0.05), 
    sliderInput("slider2", "Slider 2",min = 0.1, max = 1, value = 0.4, step = 0.05),        
    sliderInput("slider3", "Slider 3",min = 100, max = 20000, value = 5000, step= 200) 

) 
server <- function(input, output, session){} 
shinyApp(ui = ui, server=server)