Consistent styling of shiny inputs inside quarto revealjs presentations

57 Views Asked by At

I am making some slides for a workshop on Shiny and it would be cool for the slides to be interactive but the styling of the input elements is very different to if the same code is used in an app which is not great. Ideally I'm looking for a simple way to carry over the same styling from the app into the presentation, but a more complex solution involving custom css would also be acceptable.

In an app for example:

library(shiny)
ui <- fluidPage(
  sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
  textInput("name", "What is your name?"),
  radioButtons("include", "Include this?", choices = c("Yes", "No")),
  checkboxInput("switch", "Switch on"),
  dateInput("today", "Pick today")
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

App output

But a quarto/revealjs format of the same code:

---
title: "Shiny workshop"
format: revealjs:
server: shiny
---

```{r}
#| echo: false
  sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30)
  textInput("name", "What is your name?")
  radioButtons("include", "Include this?", choices = c("Yes", "No"))
  checkboxInput("switch", "Switch on")
  dateInput("today", "Pick today")

``` #sorry can't escape this

Makes this:

Revealjs output

0

There are 0 best solutions below