【问题标题】:How to display a different color on each side of range slider in Shiny app? As you slide on either side, color should also be filled automatically如何在 Shiny 应用程序的范围滑块的每一侧显示不同的颜色?当您在任一侧滑动时,颜色也应自动填充
【发布时间】:2019-07-06 15:42:51
【问题描述】:

如何在 Shiny 应用程序的范围滑块的每一侧显示不同的颜色?当您在任一侧滑动时,颜色也应自动填充

[2

库(shinyWidgets) 图书馆(闪亮)

shinyUI(fluidPage(

# 应用程序标题 titlePanel("老忠实间歇泉数据"),

# 带有滑动条输入箱数的侧边栏 侧边栏布局( 侧边栏面板(

  #tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: purple}")),
  tags$head( tags$style( type = "text/css", '
   .irs-line-mid{
     background: yellow ;
     border: 1px black ;
   }
  .irs-line-left{
    background: red ;width: 100%;
    # border-top: 1px red ; #solid #CCC ;
    # border-left: 1px blue ;
    # border-bottom: 1px blue ;# solid #CCC ;
  }
   .irs-line-right{
     background: green ;width: 100%;
  }
  .irs-bar {
    background: linear-gradient(to right, green, green);
    border-top: 1px red ; #solid #CCC ;
    border-left: 1px blue ;
    border-bottom: 1px blue ;# solid #CCC ;
  }
  .irs-bar-edge {
    background: green ; #inherit ;
    border: blue ; #inherit ;
  }

')),
  #chooseSliderSkin("Modern",color = "blue"),
  #setSliderColor(c("red" ),1),#", "#FF4500", "", "Teal"), c(1, 2, 4)),
  sliderInput("range",
               "RangeNumber of bins:",
               min = 1,
               max = 50,
               value = c(30,40),step =0.1)),

# Show a plot of the generated distribution
mainPanel(
   plotOutput("distPlot")
)

) ))

【问题讨论】:

    标签: r shiny shinydashboard


    【解决方案1】:

    不幸的是,我不确定是否可以让两边的颜色不同。也许是这样,但在我尝试的几分钟内我无法弄清楚。我能给你的最好的是这个CSS,它可以用来让中间一种颜色,两边另一种颜色。这不是您要求的,但希望仍然有用。

    library(shiny)
    
    ui <- fluidPage(
      tags$style(".irs-line {background: red} .irs-bar {background: green}"),
      sliderInput("test", "Test", 5, 10, c(7, 8))
    )
    
    server <- function(input, output, session) {
    
    }
    
    shinyApp(ui, server)
    

    【讨论】:

    • 我可以根据滑动的值更改颜色吗?例如:如果值 > 8 变红,否则变蓝
    猜你喜欢
    • 2019-05-12
    • 2021-03-29
    • 2021-09-08
    • 2020-09-19
    • 1970-01-01
    • 2014-07-25
    • 2020-06-14
    • 1970-01-01
    • 2019-08-21
    相关资源
    最近更新 更多