title: 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
body: <p>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</p>
  
  <p>[<img src="https://i.stack.imgur.com/e8sQU.png" alt="trying to get a slider shown in pic here"><a href="https://i.stack.imgur.com/e8sQU.png" rel="nofollow noreferrer">2</a></p>
  
  <p>library(shinyWidgets)
  library(shiny)</p>
  
  <p>shinyUI(fluidPage(</p>
  
  <p># Application title
    titlePanel("Old Faithful Geyser Data"),</p>
  
  <p># Sidebar with a slider input for number of bins 
    sidebarLayout(
      sidebarPanel(</p>
  
  <pre><code>  #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")
  )
  </code></pre>
  
  <p>)
  ))</p>