R Shiny - 改变方向颜色滑块输入答案

【问题标题】：R Shiny - Change direction color sliderInputR Shiny - 改变方向颜色滑块输入
【发布时间】：2020-10-28 19:17:05
【问题描述】：

我想改变sliderInput中颜色默认的方向。例如：

ui <- fluidPage(
  fluidRow(
    column(width = 6,
      sliderInput( inputId = "mySlider", 
                   label = "Some text",
                   min = 0, max = 50,
                   value = 10
      )
    )
  )
)

server <- function(input, output, session) {}
shinyApp(ui, server)

蓝色不是从 0 填充到 10（初始值），而是从 10 填充到 50。

我看到shinyWidgets 包中的noUiSliderInput 允许改变方向，但它改变的不仅仅是颜色。

有没有简单的方法可以做到这一点？

【问题讨论】：

标签： r shiny colors slider customization

【解决方案1】：

感谢starja的回答，我终于找到了如何更改（一个或几个滑块）与sliderInput完全相同的外观。代码如下：

library(shiny)

css <- "
#reverseSlider .irs-bar {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}
#reverseSlider .irs-bar-edge {
    border: 1px solid #ddd;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
    border-right: 0;
}
#reverseSlider .irs-line {
    background: #428bca;
    border: 1px solid #428bca;
}
"

ui <- fluidPage(
  fluidRow(
    column(width = 6,
           tags$style(type='text/css', css),
           div(id = "reverseSlider", 
               sliderInput( inputId = "mySlider1", 
                            label = "Some text",
                            min = 0, max = 50,
                            value = 10 )
           ),
           sliderInput( inputId = "mySlider2", 
                        label = "Some other text",
                        min = 0, max = 50,
                        value = 10 )
    )
  )
)

server <- function(input, output, session) {}
shinyApp(ui, server)

【讨论】：

【解决方案2】：

外观由sliderInput 的CSS 文件定义，我找到了自定义闪亮主题here。然后我只是改变了背景和滑块的颜色。不幸的是，我的 CSS 技能非常有限，所以我无法重新创建灰色背景的 3D 效果，现在它只是灰色。

library(shiny)
ui <- fluidPage(
  fluidRow(
    column(width = 6,
           tags$head(tags$style(HTML("
           .irs-bar {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #ddd;
}
    .irs-bar-edge {
        border: 1px solid #ddd;
        background: #ddd;
    }
.irs-line {
    background: #428bca;
    border: 1px solid #428bca;
}"))),
           sliderInput( inputId = "mySlider", 
                        label = "Some text",
                        min = 0, max = 50,
                        value = 10
           )
    )
  )
)

server <- function(input, output, session) {}
shinyApp(ui, server)

【讨论】：