Shiny: Czy można zrobić pionowy suwak?

Question

Czy istnieje możliwość zrobienia pionowego suwaka w kolorze Shiny? Zasadniczo chciałbym mieć fabułę, pionowy suwak po lewej stronie i normalny poziomy suwak pod nią.

Answer 1

Ja też tego szukałem i myślę, że to nie jest realizowane. W błyszczącej grupie dyskusyjnej jest podobne pytanie z listopada 2014 r. I jest nadal otwarte.

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

Przeszukiwanie official gallery i sieci, couldn`t mogę znaleźć żadnych przykład. Wszystkie suwaki są poziomo. Zawsze.

Answer 2

Istnieją sposoby zrobienia tego ręcznie. Musisz utworzyć niestandardowe js.

Oto szalony aplikacja shintoism gdzie wszystko obraca

#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) 


    ################################ 

Jeśli chcesz trzeba zmodyfikować js jak to jest pracować obracać tylko jeden element:

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)'}); 
    } 
});" 

to musi jeszcze trochę pracy, aby naprawić funkcjonalność, taką jak przesuwanie i dopełnianie elementu div oraz dodawanie niestandardowego identyfikatora we wszystkich elementach, które chcesz obracać: w ten sposób upewniając się, że nie zastosujesz js do elementu, którego nie chcesz i usuniesz bałagan z pierwszy przykład, ale powinno być ag ood punkt początkowy.