Kaydırma çubuğu nasıl kaydırılır (sliderInput)?

Question

R parlaklığında birkaç silderInput çubuğu için farklı renk yapmaya çalıştım. CSS vb. Gerektirir. Online baktım ve sadece bir tane silderInput'u nasıl bulabileceğimi bulabilirim. Farklı çubuklara nasıl farklı renk oluşturabilirim?

İşte test kodum. Aynı tarzda tüm çubuğu gösterecektir:

Aşağıda

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

Eğer sürgü style nasıl değiştirebileceği bir örnek kod verilmiştir. Kendi mantığınızı buna ekleyebilirsiniz.

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)