How to position label beside slider in R Shiny?

Question

There are a few solutions here and here but none of them works on Shiny 1.3.2.

This is what I attempted so far

library(shiny)

server <- shinyServer(function(input, output) { NULL })
ui <- shinyUI(
  pageWithSidebar( 
    
    headerPanel("side-by-side"), 
    
    sidebarPanel(
      fluidRow(
        tags$head(
          tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
        ),
        column(2),
        column(4,
               sliderInput("slider", label = h5("slider") ,value = 500,min = 0, max =1000,ticks = F)

               
        )
      )),
    mainPanel(
      fluidRow( 
        h3("bla bla")
      ))
  )
)

shinyApp(ui=ui,server=server) 

Is there a way to make the slider wider?

Answer 1

There’s a lot of different ways to do positioning with CSS. My choice here would be to use flexbox, as annotated below. Note the use of a .label-left container to scope the positioning changes.

library(shiny)

ui <- fluidPage(
  tags$style(HTML(
    "
    .label-left .form-group {
      display: flex;              /* Use flexbox for positioning children */
      flex-direction: row;        /* Place children on a row (default) */
      width: 100%;                /* Set width for container */
      max-width: 400px;
    }

    .label-left label {
      margin-right: 2rem;         /* Add spacing between label and slider */
      align-self: center;         /* Vertical align in center of row */
      text-align: right;
      flex-basis: 100px;          /* Target width for label */
    }

    .label-left .irs {
      flex-basis: 300px;          /* Target width for slider */
    }
    "
  )),
  div(class = "label-left",
    sliderInput("slider_1", "First slider", 0, 10, 5),
    sliderInput("slider_2", "Second slider", 0, 10, 5)
  )
)

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

shinyApp(ui, server)