cssshinyshinywidgets

Hide line under Shiny sliderTextInput when specifying from_max and to_min values


In my Shiny app, I want to give users the option to restrict the data to include patients in specific age ranges using the shinyWidgets::sliderTextInput function. When I add the from_max and to_min arguments to prevent the lower range choice from being the max value and the upper range choice from being the min value, a new annoying line appears below the slider. How can I make it go away? Here's my reproducible example:

library(shiny)
library(shinyWidgets)

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


ui <- fluidPage(
       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)

Here's the line below the slider that I'd like to eliminate:

sliderwithline

If I remove the from_max and to_min arguments, the line disappears but without those arguments a user could choose a range like this:

sliderwithnoline but zero range


Solution

  • To remove it, set the height to 0px as shown below.

    tags$style(HTML("
        .irs--shiny .irs-shadow{
          height: 0px;
        }"
      )),
    

    in your ui.