CODEWITHSUNDEEP
cssrshiny
dholzer
dholzer

Reputation: 36

How to place input slider next to eact other (Shiny)?

I am an overall programming (r language) beginner I would like to build a shiny app, which is already working, but I would like to improve readability and design, therefore I want to place my input slider next to each other and not downwards one after another.

Here is the code:

   library(shiny)  

ui <- (fluidPage(
  titlePanel("Assessment with instant feedback"),
  sidebarPanel(
    h4("x"),
    p("explanation of x"),
    h4("y"),
    p("explanation of y"),
    ),
  mainPanel(
    sliderInput(inputId = "IS", 
      label = "How important is x?",
      min = 1, max = 7,
      value = 1),
    sliderInput("ID",
      "How important is y?",
      min = 1, max = 7,
      value = 1),
    
    div(style = "height: 1px; margin: auto; width: 30%",
      sliderInput("PS",
        "How good are you in x?",
        min = 1, max = 7,
        value = 1),
      sliderInput("PD",
        "How good are you in y",
        min = 1, max = 7,
        value = 1)),
    
    actionButton("submit", "Submit")
    ),
  ) 
) 

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

shinyApp(ui=ui,server=server)

I have found this forum entry related to my issue: RShiny: How to center sliders

Two solutions are proposed, neither of which works as I would like it to.

  1. They solved it with fluidRow/columns to order the sliders. But since I use much more slider as well as a sidebar panel where information is displayed, this did not work correctly.

  2. A solution related to CSS is given as well (I have no CSS knowledge at all) so I tried to play around and ended up with: div(style = "height: 1px; margin: auto; width: 30%") but I am just able to move the slider further on the right side and not upwards next to the first two sliders.

I would prefer to avoid solution 1 if possible, so I would like to solve it via div() or other related CSS commands to place the slider next to each other. If it only works with the first solution, its fine at least I know which direction to move on...

I would be very grateful for guidance!

Thanks, Daniel

Upvotes: 1

Views: 1106

Answers (1)

YBS
YBS

Reputation: 21297

Perhaps you are looking for this

library(shiny)

ui <- (fluidPage(
  titlePanel("Assessment with instant feedback"),
  sidebarPanel(
    h4("x"),
    p("explanation of x"),
    h4("y"),
    p("explanation of y"),
  ),
  mainPanel(
    div(style="display: inline-block; width: 300px;",
      sliderInput(inputId = "IS",
                label = "How important is x?",
                min = 1, max = 7,
                value = 1)),
    div(style="display: inline-block; width: 300px;",
        sliderInput("PS",
                    "How good are you in x?",
                    min = 1, max = 7,
                    value = 1)),
    br(),
    div(style="display: inline-block; width: 300px;",
      sliderInput("ID",
                "How important is y?",
                min = 1, max = 7,
                value = 1)),
    
    div(style="display: inline-block; width: 300px;",
        sliderInput("PD",
                    "How good are you in y",
                    min = 1, max = 7,
                    value = 1)),
    div(HTML("<br>")),br(),
    actionButton("submit", "Submit")
  ),
)
)

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

})

shinyApp(ui=ui,server=server)

output

Upvotes: 2

Related Questions