在闪亮的滑块下方添加彩色线答案

【问题标题】：Add coloured line below the slider bar in shiny在闪亮的滑块下方添加彩色线
【发布时间】：2018-05-23 00:01:02
【问题描述】：

我需要在滑块下方添加一条彩色线。请在这个问题上帮助我。请查看图片以获得进一步说明

请检查我的代码，

library(shiny)    
shinyApp(
  ui <- fluidPage(
    tags$style(type = "text/css", 
               ".irs-grid-text:nth-child(-2n+12) {color: #006400; font: bold;font-size: 12px;}",
               ".irs-grid-text:nth-child(2n+14) {color: #3CB371; font: bold;font-size: 12px;}",
               ".irs-grid-text:nth-child(2n+24) {color: orange; font: bold;font-size: 12px;}",
               ".irs-grid-text:nth-child(2n+36) {color: red; font: bold;font-size: 12px;}",
               ".irs-grid-pol:nth-of-type(-n+10) {background: #006400; font: bold;}",
               ".irs-grid-pol:nth-of-type(n+11) {background: #3CB371; font: bold;}",
               ".irs-grid-pol:nth-of-type(n+23) {background:orange; font: bold;}",
               ".irs-grid-pol:nth-of-type(n+34) {background:red; font: bold;}"),
    sliderInput("bins", "Number of bins:", 1, 10, 1)
  ),
  server <- function(input, output) {})

【问题讨论】：

这个answer也可以吗？它并没有真正在滑块下方着色，而是在滑块内部。
@SeGa 是的，我通过参考您提供该页面的解决方案开发了上述滑块。但我正在寻找滑块下方的彩色线条而不是彩色刻度和文本

标签： r shiny shinydashboard

【解决方案1】：

也许是这样的？

library(shiny)
library(shinydashboard)

ui <- dashboardPage(skin = "black",
                    dashboardHeader(title = "test"),
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Complete", tabName = "comp"))),
                    dashboardBody(
                      inlineCSS(".form-group {margin-bottom: 0;}
                                .irs-with-grid {bottom: -30px;}
                                .irs-grid {height: 13px;}
                                .irs-grid-text {height: 0px;}
                                "
                      ),
                      tabItems(
                        tabItem(tabName = "comp",
                                fluidRow(
                                  sliderInput("range_var", "", value = 1, min = 1, max = 10, width = '100%'),
                                  div(id="belowslider", style= "display:inline-block; width: 59%; background-color: green;", p()),
                                  div(id="belowslider1", style= "display:inline-block; width: 40%; background-color: orange;", p())          
                                  )))))

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

shinyApp(ui, server)

【讨论】：