Brilliant: is it possible to make a vertical slider?

Question

Is it possible to make a vertical slider in Shiny? Basically, I would like to build a plot, a vertical slider on the left and a regular horizontal slider below it.

Answer 1

There are ways to do this manually. You will need to create custom js .

Here is a crazy shinny app where everything revolves

  #Libs require(c('shiny')) js<-"$(function() { var $elie = $('div'); rotate(25); function rotate(degree) { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { rotate(++degree); },100); } });" renderInputs <- function(prefix) { wellPanel( fluidRow( column(3, sliderInput(paste0(prefix, "_", "n_obs"), "View a specific date", min = as.Date('1980-05-15'), max = Sys.Date(), value = as.Date('2000-01-01'), #sliderInput("date_range", "Choose Date Range:", min = as.Date("2016-02-01"), max = Sys.Date(), value = c(as.Date("2016-02-25"), Sys.Date()) ), verbatimTextOutput("info") ), column(9, plotOutput("plot1", click = "plot_click", dblclick = "plot_dblclick", hover = "plot_hover", brush = "plot_brush") ) ) ) } ui <- shinyUI(fluidPage(theme="simplex.min.css", tags$style(type="text/css", "label {font-size: 12px;}", ".recalculating {opacity: 1.0;}" ), tags$head( tags$style(HTML(" @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); h1 { font-family: 'Lobster', cursive; font-weight: 500; line-height: 1.1; color: #48ca3b; } ")), tags$script(HTML(js)) ), # Application title tags$h2("Google!!!"), p("An adaptation of the", tags$a(href="https://google.com", "Google"), "from", tags$a(href="https://duckduckgo.com/", "DuckDuckGo"), "to get the best possible results without selling yourself"), hr(), fluidRow( column(6, tags$h3("Scenario A")), column(6, tags$h3("Scenario B")) ), fluidRow( column(12, renderInputs("a")) ), fluidRow( column(6, plotOutput("a_distPlot", height = "600px") ), column(6, plotOutput("b_distPlot", height = "600px") ) ) ) ) server <- function(input, output) { output$plot1 <- renderPlot({ plot(mtcars$wt, mtcars$mpg) }) output$info <- renderText({ xy_str <- function(e) { if(is.null(e)) return("NULL\n") paste0("x=", round(e$x, 1), " y=", round(e$y, 1), "\n") } xy_range_str <- function(e) { if(is.null(e)) return("NULL\n") paste0("xmin=", round(e$xmin, 1), " xmax=", round(e$xmax, 1), " ymin=", round(e$ymin, 1), " ymax=", round(e$ymax, 1)) } paste0( "click: ", xy_str(input$plot_click), "dblclick: ", xy_str(input$plot_dblclick), "hover: ", xy_str(input$plot_hover), "brush: ", xy_range_str(input$plot_brush) ) }) } shinyApp(ui, server) ################################ 

If you want it to rotate only one element, you need to change js as follows:

  js<-"$(function() { var $elie = $(document.getElementsByClassName('form-group shiny-input-container')); rotate(270); function rotate(degree) { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); } });" 

It still requires a bit of work to fix features like rolling and padding on the div, and adding a custom identifier to all the elements you want to rotate: this way, make sure you don't apply js to the element you don't want and get the mess out of the first example, but it should be a good starting point.

Answer 2

I also looked for it, and I think that it is not implemented. The brilliant discussion group has a similar question since November 2014, and it is still open.

https://groups.google.com/forum/#!searchin/shiny-discuss/vertical$20slider

Searching the official gallery and on the Internet, I could not find a single example. All sliders are horizontal. Always.