如何爲sliderbar（sliderInput）着色？

我試圖爲R閃亮的幾個silderInput條製作不同的顏色。它需要CSS等我在網上看，只能找到如何使一個silderInput。我怎樣才能爲不同的酒吧創建幾種不同的顏色？如何爲sliderbar（sliderInput）着色？

這是我的測試代碼。它會顯示在同一樣式的所有酒吧：

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)

來源

2016-04-28 czqiu

下面是如何修改滑塊的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)

來源

2016-04-28 07:26:24

如果這是你想要的，請接受的答案 –

如何接受呢？我點擊向上的箭頭。這是否意味着我接受了它？再次感謝你的幫助！ – czqiu

@czqiu請參閱：[如何接受答案的工作？]（https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） – zx8754

如何爲sliderbar（sliderInput）着色？

回答

相關問題