render sliderInput with style

Question

I'm trying to render several sliders based on user's number input. This works pretty nice, however, I'm not able to change the colour of the newly rendered sliders.

See example:

if (interactive()) {

  ui <- fluidPage(
    tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar 
                    {background: red}"),
               HTML(".js-irs-1 .irs-single, .js-irs-1 .irs-bar-edge, .js-irs-1 .irs-bar 
                    {background: blue}"),
               HTML(".js-irs-2 .irs-single, .js-irs-2 .irs-bar-edge, .js-irs-2 .irs-bar 
                    {background: green}"),
               HTML(".js-irs-3 .irs-single, .js-irs-3 .irs-bar-edge, .js-irs-3 .irs-bar 
                    {background: yellow}"),
               HTML(".js-irs-4 .irs-single, .js-irs-4 .irs-bar-edge, .js-irs-4 .irs-bar 
                    {background: purple}")),
    numericInput("num", "Number", value = 1, min = 1, max = 5),
    uiOutput("rendersliders")
  )

  # Server logic
  server <- function(input, output) {

    output$rendersliders <- renderUI({
      num <- input$num

      sliders <- tagList(
        sliderInput("slider1", "Slider 1",
                    value = 1, min = 1, max = 5, step = 1),
        sliderInput("slider2", "Slider 2",
                    value = 2, min = 1, max = 5, step = 1),
        sliderInput("slider3", "Slider 3",
                    value = 3, min = 1, max = 5, step = 1),
        sliderInput("slider4", "Slider 4",
                    value = 4, min = 1, max = 5, step = 1),
        sliderInput("slider5", "Slider 5",
                    value = 5, min = 1, max = 5, step = 1)
        )

      sliders <- sliders[1:num]
      sliders
    })
  }

  # Complete app with UI and server components
  shinyApp(ui, server)
}

When I change number of sliders, this stops working. I guess this is because new sliders are rendered and the first slider (initially rendered) is no longer visible.

Moreover, this wont work properly, when there are some other sliders before and after these ones rendered.

Is there any way how to render sliders with their own style?

Okay i was trying your code and you will only get the first 5 sliders with the color at your html ( in order) so you can re-use those 5 so the sliders will always have color or make a huge HTML but not with 0 to 4, with 0 - X... — J0ki
Thank for comment! I think that your approach is not applicable in my situation - first issue is that each slider has its own color and the second issue is that my app includes not only these sliders which should have the default setting/coloring. — Adela

Adela Adela · Accepted Answer · 2018-04-06T09:01:00

I finally found the solution. Hope this helps others.

if (interactive()) {

  ui <- fluidPage(
    tags$style(tags$style(type = 'text/css', 
                          ".js-irs-blue .irs-single, .js-irs-blue .irs-bar-edge, .js-irs-blue .irs-bar {
                          background: blue;
                          border-top-color: blue;
                          border-bottom-color: blue;
                          border-left-color: blue;
                          border-right-color: blue}"),
               tags$style(type = 'text/css', 
                          ".js-irs-red .irs-single, .js-irs-red .irs-bar-edge, .js-irs-red .irs-bar {
                          background: red;
                          border-top-color: red;
                          border-bottom-color: red;
                          border-left-color: red;
                          border-right-color: red}"),
               tags$style(type = 'text/css', 
                          ".js-irs-green .irs-single, .js-irs-green .irs-bar-edge, .js-irs-green .irs-bar {
                          background: green;
                          border-top-color: green;
                          border-bottom-color: green;
                          border-left-color: green;
                          border-right-color: green}"),
               tags$style(type = 'text/css', 
                          ".js-irs-yellow .irs-single, .js-irs-yellow .irs-bar-edge, .js-irs-yellow .irs-bar {
                          background: yellow;
                          border-top-color: yellow;
                          border-bottom-color: yellow;
                          border-left-color: yellow;
                          border-right-color: yellow}"),
               tags$style(type = 'text/css', 
                          ".js-irs-purple .irs-single, .js-irs-purple .irs-bar-edge, .js-irs-purple .irs-bar {
                          background: purple;
                          border-top-color: purple;
                          border-bottom-color: purple;
                          border-left-color: purple;
                          border-right-color: purple}")),
    numericInput("num", "Number", value = 1, min = 1, max = 5),
    sliderInput("slider00", "No style slider",
                value = 1, min = 1, max = 5, step = 1),
    uiOutput("rendersliders"),
    sliderInput("slider000", "No style slider",
                value = 1, min = 1, max = 5, step = 1)
               )

  server <- function(input, output) {

    output$rendersliders <- renderUI({
      num <- input$num

      sliders <- tagList(
        tags$div(class = "js-irs-red", sliderInput("slider1", "Red slider",
                                                   value = 1, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-blue", sliderInput("slider2", "Blue slider",
                                                    value = 2, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-green", sliderInput("slider3", "Green slider",
                                                     value = 3, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-yellow", sliderInput("slider4", "Yellow slider",
                                                      value = 4, min = 1, max = 5, step = 1)),
        tags$div(class = "js-irs-purple", sliderInput("slider5", "Purple slider",
                                                      value = 5, min = 1, max = 5, step = 1))
      )

      sliders <- sliders[1:num]
      sliders
    })
  }

  shinyApp(ui, server)
  }

render sliderInput with style

1 Answers