Multiple vertical noUiSliderInput side-by-side

Question

I am a shiny newbie. I am trying to make an app where the user can move the slider and select the values, like in this sound equalizer example or colour picker example. But my app places the slider inputs on top of each other. Can someone help? Codes:

#- Packages ----
#
library(shiny)
library(shinyWidgets)
#
#- App_UI ----
#
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput("num", "Years", choices = seq(1,30,1))
    ),
    mainPanel(
      uiOutput("input_ui"),
      #tableOutput("table")
    )
  )
)
#
#- App_Server ----
#
server <- function(input, output) {
  output$input_ui <- renderUI({
    num <- as.integer(input$num)
    lapply(1:num, function(i) {
        noUiSliderInput(
          inputId = paste0("Y", i), label = paste0("Y_", i),
          min = 0, max = 1000, step = 1,
          value = c(0, 300), margin = 100,
          orientation = "vertical",
          direction="rtl",
          width = "100px", height = "300px"
        )
    })
  })
}
#
#- App_RUN ----
shinyApp(ui = ui, server = server)

PS: Ideally the user could also write the values in a text box or table, but that I leave for further improvements.

score 1 · Accepted Answer · answered Mar 03 '21 at 21:11

As in this post, you can embed your inputs in a div(style="display:inline-block", ...)

server <- function(input, output) {
  output$input_ui <- renderUI({
    num <- as.integer(input$num)
    lapply(1:num, function(i) {
      div(style="display:inline-block",
          noUiSliderInput(
            inputId = paste0("Y", i), label = paste0("Y_", i),
            min = 0, max = 1000, step = 1,
            value = c(0, 300), margin = 100,
            orientation = "vertical",
            direction="rtl",
            width = "100px", height = "300px"
          ))
    })
  })
}

Amazing! Thank you very much! – understorey Mar 03 '21 at 21:13 — understorey, Mar 03 '21 at 21:13

Multiple vertical noUiSliderInput side-by-side

1 Answers1