Change Color of sliderInput's slider bar?

[Sam Finlayson]

Hey There,

Is there any way to change the color of the slider bar?  Or along those same lines, any way to see/adjust the HTML that is associated with ui.R?

Sorry if this question has already been answered.  I am just getting started (excitedly!) with shiny, and I am hopeful that the solution to this question will either a) be super simple, or b) open up a new world of how shiny development works.

Thanks so much in advance for any help!

Sam

[Ramnath Vaidyanathan]

You can use CSS to change the color.

Check the default CSS used here https://github.com/rstudio/shiny/blob/master/inst/www/shared/slider/css/jquery.slider.min.css

Ramnath

[Joe Cheng]

Regarding seeing/adjusting the HTML, the easiest way is to just View Source in your web browser.

Another way is to take any subexpression in ui.R, and call cat(as.character(...)) on it. For example,

  cat(as.character(textInput("foo", "Foo")))

prints out

  <label for="foo">Foo</label>

  <input id="foo" type="text" value=""/>

The functions called in shinyUI are just list-generating code; they return data structures that represent HTML and can be manipulated. See the ?tagList, ?tags, and ?HTML help topics. Here's one example:

https://groups.google.com/d/msg/shiny-discuss/uSetp4TtW-s/Jktu3fS60RAJ

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Sam Finlayson]

Thank you so much!  Very helpful!

[Sam Finlayson]

Thank you very much for the prompt reply.  So sorry if I missed something, but is there an example somewhere of how to use CSS with Shiny (i.e. how to name, where to place the file, etc.)?  Sorry for the level zero questions!

[Joe Cheng]

You can create a subdirectory "www" under your application directory, and place a .css file there. Then reference it from your ui.R. For example,

~/myapp/ui.R

~/myapp/server.R

~/myapp/www/styles.css

In your ui.R you can put a tags$link anywhere, for example in mainPanel:

mainPanel(

  tags$link(rel="stylesheet", type="text/css", href="styles.css"),

  # more controls go here...

)

That tags$link will become:

<link rel="stylesheet" type="text/css" href="styles.css"/>

Notice that while your styles.css is stored in a www directory, you do not reference "www" in your link tag.

--

[Sam Finlayson]

Thank you so much!  Very much appreciated.

[Andrew Clark]

Is it possible to move the www/styles.css to the root directory so that it can service several apps

I tried this with href="./styles.css" and href="./www/styles.css" but does not seem to  work with either

[Joe Cheng]

You might take a look at addResourcePath, it can be used to map an arbitrary directory on disk to a URL for serving up static assets. You'll have to call it from each app though.

[Andrew Clark]

Had a quick look but haven't fathomed out yet

I cannot do something like

 tags$head(

         tags$link(rel = 'stylesheet', type = 'text/css', href = 'styles.css'),

         tags$link(rel = 'stylesheet', type = 'text/css', href = 'appStyles.css'),

    )

where appStyles would be CSS specific to the app?

The above code does not cause an error - but doesnt work either

[Ramnath Vaidyanathan]

Here is one way to do what Joe suggested. Suppose all your common css files are in a folder named 'common', and the absolute path to it is given by path_to_common. 

addResourcePath('common', path_to_common)

tags$head(

         tags$link(rel = 'stylesheet', type = 'text/css', href = 'common/styles.css'),

         tags$link(rel = 'stylesheet', type = 'text/css', href = 'common/appStyles.css'),

)

The first line tells Shiny to map all assets starting with the prefix "common" to the full path.

Hope this helps.