Dynamically colored sliderInput

Question

I have a question that is related to post How to color sliderbar (sliderInput)?.

Is it possible to make the sliderInput change its color dependent on the chosen value?

I would like to offer the user to input a value from 0 to 10. However, there is a recommended range from, say, 4 to 8. As a consequence, the slider color should be green if the user chooses a value between 4 and 8, but it should change to orange (or red) if a value outside the recommended range is chosen.

Any help on implementing this would be greatly appreciated.

Answer 1

Use renderUI, and control the conditions in color() any way you want

rm(list = ls())
library(shiny)
ui <- fluidPage(

    sliderInput("slider1", "Slider 1",min = 0, max = 10, value =c(4,8), 
                 step = 1),

    uiOutput("abc")

)
server <- function(input, output, session){

    color <- reactive({
       if(input$slider1[1] < 4 || input$slider1[2] > 8 ){
         tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-
               edge, .js-irs-0 .irs-bar {background: red}"))
        }else{
          tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-
                  edge, .js-irs-0 .irs-bar {background: lightgreen}"))
        }
    })

  output$abc <- renderUI({ 
       color()
  })

}
shinyApp(ui = ui, server=server)