3

I know that changing the color of the sliderInput in Shiny requires to change something in the css files, I tried to look inside the function sliderInput() with the source viewer but it kinda doesn't make sense to me as I do not know much about html and CSS. I guess it must be changed somewhere here: 

dep <- htmlDependency("ionrangeslider", "2.0.6", c(href = "shared/ionrangeslider"), 
    script = "js/ion.rangeSlider.min.js", stylesheet = c("css/normalize.css", 
      "css/ion.rangeSlider.css", "css/ion.rangeSlider.skinShiny.css"))

(this is inside the sliderInput() function)

And I also guess you need to include other CSS files with other possible colors somewhere so it can access them. But I am really at a loss here I have never done web development before.
So if somebody could walk me through it step by step that would be awesome !!! I would like to have a blue slider (default color) but also a green and a red one. thanks again!

tospig
  • 7,762
  • 14
  • 40
  • 79
jeandut
  • 2,471
  • 4
  • 29
  • 56
  • Can you share a URL or some sort of anything? =) We do not all have access to the Shiny plugin or whatever it is you are using. Have you tried to inspect the page with developer tools and seeing where the color of the slider is coming from, it should show the exact stylesheet. Right click on the slider, and Click inspect Element in Chrome. – Michael G Jun 17 '15 at 00:06
  • Hello Michael thanks for your answer I checked the code of the website but it is far from being transparent especially for the sliderInput because everything is embedded in Shiny, itself which is not a plug-in but rather a web development library on R a statistical open source software. And I think the answer to my question would have to come from someone familiar with CSS and javascript but mostly from someone familiar with R and shiny. – jeandut Jun 17 '15 at 04:06
  • As for sharing my code I cannot do it but the exemple of interest is easily reproducible as it is one of the most basic function of shiny an exemple is given here : [link](http://shiny.rstudio.com/gallery/isolate-demo.html) – jeandut Jun 17 '15 at 04:06
  • Thanks to you I could do it by modifying the CSS directly on the web page but I do not want to do it each time I launch my app. I want it to modify it on R directly. – jeandut Jun 17 '15 at 04:21
  • The CSS code responsible for the color is the following : `.irs-bar { height: 8px; top: 25px; border-top: 1px solid #428bca; border-bottom: 1px solid #428bca; background: #460; } .irs-bar-edge { height: 8px; top: 25px; width: 14px; border: 1px solid #428bca; border-right: 0; background: #460; border-radius: 16px 0 0 16px; -moz-border-radius: 16px 0 0 16px; }` – jeandut Jun 17 '15 at 04:23
  • By changing it directly on the html I can simultaneously change the colours of all my sliders but I wanted a specific color for each and still I would rather code that in R and not modify it on the page afterwards – jeandut Jun 17 '15 at 16:42
  • Does the answer rely on the `IncludeCSS()` function ? Please help ! – jeandut Jun 17 '15 at 16:45

2 Answers2

5

Follow the tutorial here to create a CSS file within a folder called www as a sub folder of the folder with your shiny app in it. The contents of this file should be:

.js-irs-0 .irs-bar {
border-top-color: #d01010;
border-bottom-color: #d01010;
} 

.js-irs-0 .irs-bar-edge {
border-color: #d01010;
}

.js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {
background: #a00;
}

.js-irs-1 .irs-bar {
border-top-color: #10d010;
border-bottom-color: #10d010;
} 

.js-irs-1 .irs-bar-edge {
border-color: #10d010;
}

.js-irs-1 .irs-single, .js-irs-1 .irs-bar-edge, .js-irs-1 .irs-bar {
background: #0a0;
}

I've made my sliders red and green above. Each slider on a page is identified using .js-irs-n where n is a number starting at 0. You can customise the colour by varying the colour codes e.g. #a00 and #d01010 above. You could use a colour picker if it helps.

Example using red, green and blue sliders:

sliders

Nick Kennedy
  • 12,510
  • 2
  • 30
  • 52
  • Thank you so much for your answer Nick, exactly what I was looking for !!!!!!!! however one more thing : so I used the includeCSS function and created the file but this command put all my sliders in the same color because they share the same id I guess. How to have different sliders of different colors? Which was my original question ? But thank you so much that is a great first step ! – jeandut Jun 22 '15 at 18:10
  • I tried changing the inputId of the slider but it doesn't recognize the arguments anymore – jeandut Jun 22 '15 at 18:36
  • @jean updated example to include two different sliders one red and one green. – Nick Kennedy Jun 22 '15 at 19:27
  • @jean updated with image. Note using includeCss while increase the size of the HTML output while using the tag method will keep the css in a separate file which can be cached separately by the browser – Nick Kennedy Jun 22 '15 at 19:49
-1

I see, I haven't used that library before, but if your iFrame from that system is on the same parent domain, than this may come in handy for your case, if its not, I am not sure you will find a solution for this, unless Shiny offers a solution specifically.

$('iframe').load( function() {
$('iframe').contents().find("head")
  .append($("<style type='text/css'>  .irs-bar { height: 8px; top: 25px; border-top: 1px solid #428bca; border-bottom: 1px solid #428bca; background: #460; } .irs-bar-edge { height: 8px; top: 25px; width: 14px; border: 1px solid #428bca; border-right: 0; background: #460; border-radius: 16px 0 0 16px; -moz-border-radius: 16px 0 0 16px; }  </style>"));

});

then edit the style accordingly. Again, not sure how/where you are using this source along with your content. I am sure its probably on a separate domain though. So sorry.

Michael G
  • 189
  • 10
  • Ok Michael thanks that is a good answer could you be more specific to where to put this line of code ? And also explain to me a bit more about how you came up with this, and how to use your answer to do other changes like this one (tutorial on how to use css with Shiny other than the one one the shiny website which I find hard to get into for a non javascript/css user) ? – jeandut Jun 22 '15 at 03:37