Add coloured line below the slider bar in shiny

Question

I need to add a coloured line below the slider bar. Please help me on this issue. Please check the image for further clarification

Please check my code,

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) {})

Would this answer also be ok? It doesnt really color below the slidebar, but inside the slidebar. — SeGa
@SeGa Yes i developed the above slider by taking reference from your solution provided that page. But I am looking for a coloured line below slider instead of a coloured ticks and texts — SJB

SeGa SeGa · Accepted Answer · 2018-05-22T15:53:39

Maybe something like this?

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)

Add coloured line below the slider bar in shiny

1 Answers