Changing The Color of The Sliderinput in Shiny Walkthrough

Changing the color of the sliderInput in Shiny walkthrough

Follow the tutorial here to create a CSS file within a folder called www as a sub folder of the folder with your shiny app in it. The contents of this file should be:

.js-irs-0 .irs-bar {
border-top-color: #d01010;
border-bottom-color: #d01010;
} 

.js-irs-0 .irs-bar-edge {
border-color: #d01010;
}

.js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {
background: #a00;
}

.js-irs-1 .irs-bar {
border-top-color: #10d010;
border-bottom-color: #10d010;
} 

.js-irs-1 .irs-bar-edge {
border-color: #10d010;
}

.js-irs-1 .irs-single, .js-irs-1 .irs-bar-edge, .js-irs-1 .irs-bar {
background: #0a0;
}

I've made my sliders red and green above. Each slider on a page is identified using .js-irs-n where n is a number starting at 0. You can customise the colour by varying the colour codes e.g. #a00 and #d01010 above. You could use a colour picker if it helps.

Example using red, green and blue sliders:

Change color of shiny sliderInput with range

You want the following added in as well:

.js-irs-0 .irs-to,.js-irs-0 .irs-from

Change colour for sliderInput

This is similar to @LyzandeR answer, but uses simpler code and doesn't use any additional packages

library(shiny)

mycss <- "
.irs-bar,
.irs-bar-edge,
.irs-single,
.irs-grid-pol {
  background: red;
  border-color: red;
}
"

ui <- fluidPage(
  tags$style(mycss),
  sliderInput("num", "Number", 0, 10, 5)
)

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

shinyApp(ui, server)

Dynamically colored sliderInput

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)

How to refresh sliderInput() in Shiny in real time (not only when the sliding ends)?

After reading some of the source code of sliderInput I found out that the default debounce behavior (cf. to the getRatePolicy section of this article) of the slider is only adhered to in absence of a data-immediate attribute in the HTML code.

That is, we just need to add this attribute to the HTML and the slider reacts instantly.

Note. If you look into the source code referenced before, you will see that receiveMessage will reset immediate to false. receiveMessage is called whenever we use updateSliderInput. Thus, after calling updateSliderInput we have to re-assign the immediate data attribute in order to still see the behaviour.

In the example below you see that the values of the hacked slider are updated instantaneously, while the second slider shows default behavior. A click on update will turn of this behavior as sort of collateral damage and in case you want to use updateSliderInput, you should make sure that the data-immediate attribute is added again (the code for the reset button shows one possible way to do so).

Be, however, aware that there is most likely a reason why the shiny team did not expose this functionality to the end user, so this solution should be regarded as a hack and used with care. (Judging from the source code, they use the immediate attribute to overrule the default rate policy when using updateSliderInput(and thus receiveMessage).

library(shiny)
library(shinyjs)

my_sld <- function(...) {
   sld <- sliderInput(...)
   sld$children[[2]]$attribs$`data-immediate` <- "true"
   sld
}

shinyApp(
   fluidPage(
      useShinyjs(),
      my_sld("sld1", "Immediate:", 1, 10, 1), 
      verbatimTextOutput("dbg1"),
      sliderInput("sld2", "Debounced:", 1, 10, 1),
      verbatimTextOutput("dbg2"),
      actionButton("update", "Update kills Immediateness"),
      actionButton("reset", "Re-add immediate attribute")
      ),
   function(input, output, session) {
      output$dbg1 <- renderPrint(input$sld1)
      output$dbg2 <- renderPrint(input$sld2)
      observeEvent(input$update, {
         updateSliderInput(session, "sld1", value = 8)
      })
      observeEvent(input$reset, {
         runjs("$('#sld1').data('immediate', true);")
      })
   })

Color tick mark & tick mark labels in sliderinput - Shiny

It's more of a css issue than R or Shiny. This should do the work:

library(shiny)    
shinyApp(
  ui <- fluidPage(
    tags$style(type = "text/css", 
               ".irs-grid-text:nth-child(-2n+18) {color: red}",
               ".irs-grid-text:nth-child(2n+20) {color: blue}",
               ".irs-grid-pol:nth-of-type(-n+18) {background:red}",
               ".irs-grid-pol:nth-of-type(n+18) {background:blue}"),
    sliderInput("bins", "Number of bins:", 1, 10, 1)
  ),
  server <- function(input, output) {} 

If you need to further customize it, open the style editor in your browser, tweak the numbers, and update the string in the code.

---

Related Topics