How to color the slider in shiny to the right of the value instead of to the left?

3
votes

I am building an app with shiny and use a slider pretty much as the one shown in Shiny gallery (http://shiny.rstudio.com/gallery/slider-bar-and-slider-range.html). By default it gets coloured blue to the left of the chosen value (in this example from 0 to 50). Is there a way to get it coloured to the right of the chosen value: e.i. from 50 to 100?

The reason I would like to do it, is that the user should read it as "all values from the threshold to max", so colouring from the min to the threshold would be misleading.

Has anybody an idea on that? Maria

1
rshinyslider

1 Answers

3
votes

There's probably a better way, but here's a quick css option: 

library(shiny)
shinyApp( 
  ui = fluidPage(

    tags$head( tags$style( type = "text/css", '
      .irs-line-mid{
        background: #428bca ;
        border: 1px solid #428bca ;
      }
      .irs-line-right{
        background: #428bca ;
      }
      .irs-bar {
        background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
        border-top: 1px solid #CCC ;
        border-bottom: 1px solid #CCC ;
      }
      .irs-bar-edge {
        background: inherit ;
        border: inherit ;
      }

    ')), 

    sliderInput( "slider", label  = "Slider", min = 0, max = 100, value = 50)
  ), server = function(input,output){} 
)