如何隐藏Shiny sliderTextInput添加from_max/to_min后出现的下方线条

这个多余线条是组件为了标记不可选区间自动渲染的，你可以通过自定义CSS隐藏它，同时调整滑块线条样式保证视觉连贯。

直接修改UI部分添加自定义样式即可：

library(shiny)
library(shinyWidgets)

years <- c(0, 18, 50, 100)


ui <- fluidPage(
  # 添加自定义CSS隐藏多余线条
  tags$style(
    HTML("
      /* 隐藏不可选区间的中间线条 */
      .irs--shiny .irs-line-mid {
        display: none;
      }
      /* 调整左右线条边框，避免断层 */
      .irs--shiny .irs-line-left {
        border-right: none;
      }
      .irs--shiny .irs-line-right {
        border-left: none;
      }
    ")
  ),
  
  sliderTextInput(
    inputId = "range", label = h4(tags$b("Age interval of interest:")), 
    choices = years, selected = range(years), 
    from_max = 50,
    to_min = 18,
    grid = FALSE
  ),
  textOutput(outputId = "ages")
)


server <- function(input, output, session) {
  
  output$ages <- renderText(paste("Age range is:",
                                 input$range[[1]],
                                 "to",
                                 input$range[[2]], 
                                 sep = " "))
  
}

shinyApp(ui, server)

原理说明 #

• .irs-line-mid是组件渲染不可选区间的元素，设置display: none直接隐藏它
• 调整.irs-line-left和.irs-line-right的边框，是因为原本中间线条存在时，左右线条的边框会被隔开，隐藏后去掉边框能保证滑块线条视觉上完整连贯

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