Shiny类表格输入UI美化：滑块对齐、标签显示、窗口适配问题

以下方案可同时解决你提出的3个问题，可根据需求单独摘取对应修改部分使用： #

功能修复说明 #

• 滑块与文本对齐：通过统一调整文本、输出值与滑块组件的垂直外边距，实现同一行元素对齐。
• 滑块刻度标签控制：内置两种显隐规则，默认仅当前悬浮的滑块显示刻度标签，也可替换为仅首行/尾行滑块显示标签，代码内有对应注释说明。
• 防止窗口缩小换行：给表格结构容器设置最小宽度，禁用小屏幕下的栅格自动堆叠逻辑，避免结构重排。

完整可运行修改后代码 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 对齐修复：统一非表头文本的顶部边距 */
      .align-row h5:not(.table-header) {
        margin-top: 26px;
      }
      .align-row .shiny-text-output {
        margin-top: 26px;
      }
      /* 标签显隐控制：默认隐藏所有刻度，仅悬浮时显示 */
      .slider-text-input .irs-grid-text {
        display: none;
      }
      .slider-text-input:hover .irs-grid-text {
        display: block;
      }
      /* --- 可选替换：仅首行滑块显示刻度，注释上面3行，取消注释下面1行即可
      .slider-text-input:not(:first-of-type) .irs-grid-text { display: none; }
      */
      /* --- 可选替换：仅尾行滑块显示刻度，注释上面3行，取消注释下面1行即可
      .slider-text-input:not(:last-of-type) .irs-grid-text { display: none; }
      */
      /* 换行修复：给表格行设置最小宽度，禁止缩放堆叠 */
      .fixed-table-row {
        min-width: 450px;
      }
    "))
  ),
  # App title ----
  titlePanel("Overall Title"),
  # Sidebar layout with input and output definitions ----
  sidebarLayout(
    # Sidebar panel for inputs ----
    sidebarPanel(
      h4(strong("Set lake N concentrations (ppb)")),
      fluidRow(class = "align-row fixed-table-row",
        column(3,
               h5(strong("Lake"), class = "table-header"),
               h5("Okareka"),
               h5("Tikitapu")
        ),
        column(3,
               h5(strong("Existing N"), class = "table-header"),
               h5("190.98"),
               h5("173.88")
        ),

        column(4,
               h5(strong("Improvement/Degradation"), class = "table-header"),
               sliderTextInput(
                 inputId = "DegImp_1",
                 label = "",
                 grid = TRUE,
                 force_edges = TRUE,
                 choices = c("-20%", "-10%", "No change", "10%", "20%"),
                 selected = "No change"
               ),

               sliderTextInput(
                 inputId = "DegImp_8",
                 label = "",
                 grid = TRUE,
                 force_edges = TRUE,
                 choices = c("-20%", "-10%", "No change", "10%", "20%"),
                 selected = "No change"
               )
        ),
        column(2,
               h5(strong("Value"), class = "table-header"),
               textOutput("DegImp_1value"),
               textOutput("DegImp_8value")
        )
      )
    ),
    # Main panel for displaying outputs ----
    mainPanel(
      # Output: Data file ----
      tableOutput("contents")
    )
  )
)

# server ----
server <- function(input, output) {
  
  DI_1value <- reactive ({ switch(input$DegImp_1, "-20%" = 190.98*0.8, "-10%" = 190.98*0.9, "No change" = 190.98, "10%" = 190.98*1.1, "20%" = 190.98*1.2)})
  DI_8value <- reactive ({ switch(input$DegImp_8, "-20%" = 173.88*0.8, "-10%" = 173.88*0.9, "No change" = 173.88, "10%" = 173.88*1.1, "20%" = 173.88*1.2)})
  
  output$DegImp_1value <- renderPrint({ round(DI_1value(),2) })
  output$DegImp_8value <- renderPrint({ round(DI_8value(),2) })
  
}

# Create Shiny app ----
shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者Nicki_NZ