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

3
votes

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

[trying to get a slider shown in pic here2

library(shinyWidgets) library(shiny)

shinyUI(fluidPage(

# Application title titlePanel("Old Faithful Geyser Data"),

# Sidebar with a slider input for number of bins sidebarLayout( sidebarPanel(

  #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")
)

) ))

1
rshinyshinydashboard

1 Answers

3
votes

I'm not sure if it's possible to have both sides be different colours unfortunately. Maybe it is, but I couldn't figure it out in the few minutes I tried. The best I can give you is this CSS, which can be used to have the middle one colour and the two sides another colour. It's not what you asked for, but hopefully still useful.

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)

demo