CODEWITHSUNDEEP
rshinyshinydashboard
user8229029
user8229029

Reputation: 1162

How to change size of sliderInput values shinydashboard

I realize there are lots of questions/answers on how to change the size of sliderInput text for shinydashboard, but I am still having problems. My output looks like this:

enter image description here

The x axis values on the slider are way too small. The code that renders the sliderInput is:

    # Data description
    observeEvent(input$btnDescr, {
            output$descr_daterange <- renderUI({
                    sliderInput(inputId='descr_daterange',
                                label='Select Time Period',
                                min = as.Date(min(inputData$qcdata$LDT)),
                                max = as.Date(max(inputData$qcdata$LDT)),
                                value = c(as.Date(min(inputData$qcdata$LDT)),as.Date(max(inputData$qcdata$LDT))
                                )
                    )
            })
    }),

and the corresponding code in the ui <- ... section of the app is

uiOutput("descr_daterange')

What is the code I need to change the size of the x-axis text, and where does it go? I have tried so many things, with no luck. I think it involves this code, but I'm still putting in the wrong spot, or something else.

tags$style(type='HTML', ".irs-grid-text { font-size: 10pt; }")

Upvotes: 2

Views: 1683

Answers (1)

bs93
bs93

Reputation: 1316

If you want to change the text size of only the one sliderInput being returned from the renderUI you can wrap the slider in a div, give it a unique ID, and apply the CSS style to just that input. You should be able to place the tags$style in either the UI or in the renderUI, but here is a very minimal example with the style in the renderUI to keep everything together. We will need to use a tagList() to return multiple UI elements from the server in the renderUI.

library(shiny)

ui <- fluidPage(
uiOutput('ui_norm'),
uiOutput('ui_big')
)

server <- function(input, output, session) {
  output$ui_norm <- renderUI({
      sliderInput('in1', 'Slider', min = 1, max = 10, value = 5)
  })
  
  output$ui_big <- renderUI({
  tagList(
    tags$style(type = 'text/css', '#big_slider .irs-grid-text {font-size: 20px}'), 
    div(id = 'big_slider',
      sliderInput('in2', 'Slider', min = 1, max = 10, value = 5)
       )#div close
      )#taglst close
  })
}

shinyApp(ui, server)

Note, the # in the tags$style to select the element with id = big_slider which is our div.

enter image description here

Upvotes: 3

Related Questions