sliderInput in Shiny -- how to control the length/width of the slider in shiny?

Question

When i use the sliderInput function in shiny it seems like I am not able to control the width/length of the slider. By default, the slider occupies the entire width of the page (in basicPage mode, not in the pageWithSidebar mode). I am wondering if there is some way to control the width of the slider. Thanks for any suggestions.

Kacey

Have you read the documentation? "These functions are primarily intended for users who are proficient in HTML/CSS, and know how to lay out pages in Bootstrap" - I would say if you're struggling to change defaults maybe some tutorials on using Bootstrap would help? If you're having specific issues (if you've tried certain solutions and they're not working), post them here and maybe we can help – Wreckage

Answer 1

It is possible to add a style tag in ui.r:

tags$head(
      tags$style(type="text/css", ".jslider { max-width: 200px; }")
    ),

Place these lines inside shinyUI() and the width of the sliderinput can be adjusted.

UPDATE:
With Shiny 0.11 RStudio switched from jslider to irs (http://cran.r-project.org/web/packages/shiny/NEWS):

Changed sliders from jquery-slider to ion.rangeSlider. These sliders have an improved appearance, support updating more properties from the server, and can be controlled with keyboard input. Which means .jslider won't work any more.

Change to .irs {max-width: 200px;} should work.

Regrate

@Timror, I tried using this in a CSS file, as .jslider {max-width: 200px;}. Shouldn't this method also work? – Recover

@MattO'Brien, normally it should. Have you added a reference to your css in for instance, fluidpage(..., theme="@@.css")? From shiny help: 'Alternative Bootstrap stylesheet (normally a css file within the www directory). For example, to use the theme located at www/bootstrap.css you would use theme = "bootstrap.css".' – Regrate

Yes, I did! I know it can access the css file, since other changes (like font) are visible... – Recover

searching in 'cran.r-project.org/web/packages/shiny/NEWS' revieled an update with Shiny 0.11: Changed sliders from jquery-slider to ion.rangeSlider. These sliders have an improved appearance, support updating more properties from the server, and can be controlled with keyboard input. Which means .jslider won't work any more. Change to .irs {max-width: 200px;}. – Regrate

Answer 2

Timrors answer did not work for me. However, there is an argument width=NULL in sliderInput(), which is documented as follows:

The width of the sliderInput, e.g. '400px', or '100%'; see validateCssUnit.

Setting it to 100% creates a sliderInput spannign the entire row, etc.

Papoose