如何在 Shiny 应用程序中的范围滑块的每一侧显示不同的颜色？当您向两侧滑动时，颜色也应该自动填充

Question

如何在 Shiny 应用程序中的范围滑块的每一侧显示不同的颜色？当您向两侧滑动时，颜色也应该自动填充

[2

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

Answer 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)