add a 'width' option to selectizeInput() and sliderInput() to specify the width of these widgets

R/bootstrap.R

@@ -732,6 +732,7 @@ selectInput <- function(inputId, label, choices, selected = NULL,
 #'   for possible options (character option values inside \code{\link{I}()} will
 #'   be treated as literal JavaScript code; see \code{\link{renderDataTable}()}
 #'   for details).
+#' @param width The width of the selectize input.
 #' @note The selectize input created from \code{selectizeInput()} allows
 #'   deletion of the selected option even in a single select input, which will
 #'   return an empty string as its value. This is the default behavior of
@@ -741,12 +742,12 @@ selectInput <- function(inputId, label, choices, selected = NULL,
 #'   \code{choices} argument. This is to keep compatibility with
 #'   \code{selectInput(..., selectize = FALSE)}.
 #' @export
-selectizeInput <- function(inputId, ..., options = NULL) {
-  selectizeIt(inputId, selectInput(inputId, ..., selectize = FALSE), options)
+selectizeInput <- function(inputId, ..., options = NULL, width = NULL) {
+  selectizeIt(inputId, selectInput(inputId, ..., selectize = FALSE), options, width)
 }
 
 # given a select input and its id, selectize it
-selectizeIt <- function(inputId, select, options, nonempty = FALSE) {
+selectizeIt <- function(inputId, select, options, width = NULL, nonempty = FALSE) {
   res <- checkAsIs(options)
 
   selectizeDep <- html_dependency("selectize", "0.8.5", "shared/selectize",
@@ -765,6 +766,7 @@ selectizeIt <- function(inputId, select, options, nonempty = FALSE) {
         type = 'application/json',
         `data-for` = inputId, `data-nonempty` = if (nonempty) '',
         `data-eval` = if (length(res$eval)) HTML(toJSON(res$eval)),
+        `data-width` = width,
         if (length(res$options)) HTML(toJSON(res$options)) else '{}'
       )
     ),
@@ -928,7 +930,7 @@ actionLink <- function(inputId, label, icon = NULL, ...) {
 #' @param animate \code{TRUE} to show simple animation controls with default
 #'   settings; \code{FALSE} not to; or a custom settings list, such as those
 #'   created using \code{animationOptions}.
-#'
+#' @param width The width of the slider.
 #' @family input elements
 #' @seealso \code{\link{updateSliderInput}}
 #'
@@ -947,7 +949,7 @@ actionLink <- function(inputId, label, icon = NULL, ...) {
 #' @export
 sliderInput <- function(inputId, label, min, max, value, step = NULL,
                         round=FALSE, format='#,##0.#####', locale='us',
-                        ticks=TRUE, animate=FALSE) {
+                        ticks=TRUE, animate=FALSE, width=NULL) {
 
   if (identical(animate, TRUE))
     animate <- animationOptions()
@@ -961,7 +963,8 @@ sliderInput <- function(inputId, label, min, max, value, step = NULL,
 
   # build slider
   sliderTag <- slider(inputId, min=min, max=max, value=value, step=step,
-    round=round, locale=locale, format=format, ticks=ticks, animate=animate)
+    round=round, locale=locale, format=format, ticks=ticks, animate=animate,
+    width=width)
 
   if (is.null(label)) {
     sliderTag

R/slider.R

@@ -33,7 +33,7 @@ animationOptions <- function(interval=1000,
 # (www/shared/slider contains js, css, and img dependencies)
 slider <- function(inputId, min, max, value, step = NULL, ...,
                    round=FALSE, format='#,##0.#####', locale='us',
-                   ticks=TRUE, animate=FALSE) {
+                   ticks=TRUE, animate=FALSE, width=NULL) {
   # validate inputId
   inputId <- as.character(inputId)
   if (!is.character(inputId))
@@ -112,7 +112,8 @@ slider <- function(inputId, min, max, value, step = NULL, ...,
         'data-from'=min, 'data-to'=max, 'data-step'=step,
         'data-skin'='plastic', 'data-round'=round, 'data-locale'=locale,
         'data-format'=format, 'data-scale'=ticks,
-        'data-smooth'=FALSE
+        'data-smooth'=FALSE,
+        'data-width'=width
       ),
       dep
     )

inst/www/shared/shiny.js

@@ -1721,7 +1721,9 @@
              };
     },
     initialize: function(el) {
-      $(el).slider();
+      var $el = $(el);
+      $el.slider();
+      $el.next('span.jslider').css('width', $el.data('width'));
     }
   });
   inputBindings.register(sliderInputBinding, 'shiny.sliderInput');
@@ -2207,6 +2209,7 @@
         control.destroy();
         control = $el.selectize(settings)[0].selectize;
       }
+      $el.next('div.selectize-control').css('width', config.data('width'));
       return control;
     }
   });