Changing the color of the sliderInput in Shiny walkthrough

Question

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!

Answer 1

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: