如何在 R Shiny 中将标签放置在滑块旁边？

Question

有一些解决方案 here and here 但其中 none 适用于 Shiny 1.3.2。

这是我目前尝试的方法

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)

有没有办法让滑块变宽？

Answer 1

CSS有很多不同的定位方法。我在这里的选择是使用 flexbox，如下所述。注意使用一个 .label-left 定位变化范围的容器。

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)

如何在 R Shiny 中将标签放置在滑块旁边？

How to position label beside slider in R Shiny?

r

shiny