CODEWITHSUNDEEP
rshiny
Adela
Adela

Reputation: 1797

render sliderInput with style

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?

Upvotes: 1

Views: 730

Answers (1)

Adela
Adela

Reputation: 1797

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)
  }

Upvotes: 1

Related Questions