CODEWITHSUNDEEP
cssrshiny
jeandut
jeandut

Reputation: 2514

Changing the color of the sliderInput in Shiny walkthrough

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!

Upvotes: 3

Views: 5834

Answers (2)

Nick Kennedy
Nick Kennedy

Reputation: 12640

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

Upvotes: 5

Michael G
Michael G

Reputation: 189

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.

Upvotes: -1

Related Questions