स्लाइडरबार (स्लाइडर इनपुट) कैसे रंग करें?

Question

मैंने आर चमकदार में कुछ silderInput बार के लिए अलग रंग बनाने की कोशिश की। इसके लिए सीएसएस आदि की आवश्यकता है। मैंने ऑनलाइन देखा और केवल एक silderInput बनाने का तरीका मिल सकता है। मैं अलग-अलग सलाखों में कई अलग-अलग रंग कैसे बना सकता हूं?

यहां मेरा परीक्षण कोड है। यह एक ही शैली में सभी बार प्रदर्शित करेगा:

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

नीचे आप स्लाइडर का style संशोधित कर सकते हैं कि कैसे का एक नमूना कोड है। आप इसे अपना तर्क जोड़ सकते हैं।

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)