R/maVerticalSliders.R

In jon11w/maSliders:

#' MA Vertical Slider
#'
#' This function allows you build a vertical slider. Set the minimum, maximum and initial values, and set the slider name. 
#' The value of the slider can be accessed on the Shiny server via 'input$id', where id is the given id string.
#' @param id The input slot that will be used to access the value.
#' @param name Name displayed below the slider.
#' @param min Minimum slider value. Defaults to 0.
#' @param max Maximum slider value. Defaults to 100.
#' @param value Initial value. Defaults to 50.
#' @export
#' @examples
#' verticalSlider(id = "mySlider", name = ")

maVerticalSlider <- function(id, name, min = 0, max = 100, value = 50){
  
  addResourcePath(
    prefix = 'wwwVerticalSlider', 
    directoryPath = system.file('www', package='maSliders')
  )
  
  tagList(
    
    singleton(
      tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "wwwVerticalSlider/sliderStyle.css"))
    ),
    
    tags$div(class = "verticalSlider", id = id,
             tags$div(class = "verticalSliderOuter", id = paste(id, "-container-outer", sep = ""),
                      tags$span(class = "glyphicon glyphicon-plus"),
                      tags$div(class = "sliderContainer", id = paste(id, "-container", sep = ""),
                               tags$input(type = "range", class = "slider",
                                          id = paste(id, "-slider", sep = ""),
                                          "min" = min,
                                          "max" = max,
                                          "value" = value)
                               ),
                      tags$span(class = "glyphicon glyphicon-minus")
                      ),
             tags$div(class = "sliderName",
                      tags$div(name),
                      tags$div(id = paste(id, "-value", sep = ""))
                      ),
             tags$script(HTML(paste('var sliderMargin = (document.getElementById("', id,'-slider").offsetWidth - 10)/2; /* 10 is width of slider bar */
                                    var styleSet = "margin: ".concat("0 ", sliderMargin, "px 0 ", sliderMargin, "px;");
                                    
                                    $(document).on("shiny:connected", function(e) {
                                    Shiny.onInputChange("', id,'", document.getElementById("', id,'-slider").value);
                                    $("#', id,'-value").html(document.getElementById("', id,'-slider").value);
                                    })
                                    
                                    document.getElementById("', id,'-slider").oninput = function() {
                                    Shiny.onInputChange("', id,'", document.getElementById("', id,'-slider").value);
                                    $("#', id,'-value").html(document.getElementById("', id,'-slider").value);
                                    }

                                    document.getElementById("', id, '-container-outer").setAttribute("style","width:15px; height:22.5rem;");', 
                                    sep = "")
                              )
                         )
             )
    
  )
}