Come colorare la barra di scorrimento (sliderInput)?

Question

Ho provato a creare colori diversi per alcune barre silderInput in R shiny. Richiede CSS ecc. Ho guardato online e posso solo trovare come fare uno silderInput. Come posso creare diversi colori diversi per barre diverse?

Ecco il mio codice di prova. Mostrerà tutte bar nello stesso stile:

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

Di seguito è riportato un codice di esempio di come è possibile modificare style dei cursori. È possibile aggiungere la propria logica ad esso.

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)