css - 在 Shiny 演练中更改 sliderInput 的颜色

Question

我知道在 Shiny 中更改 sliderInput 的颜色需要更改 css 文件中的某些内容，我尝试使用源代码查看器查看函数 sliderInput() 内部，但它有点不行对我来说很有意义，因为我对 html 和 CSS 了解不多。我想它必须在这里的某个地方改变:

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")) 

(这是在 sliderInput() 函数内)

而且我还猜想您需要在某处包含其他具有其他可能颜色的 CSS 文件，以便它可以访问它们。但是我真的很茫然，我以前从来没有做过网络开发。
所以，如果有人能一步一步地引导我完成它，那就太棒了!!!!我想要一个蓝色 slider (默认颜色)，还有一个绿色和一个红色 slider 。再次感谢!

Answer 1

按照教程here在名为 www 的文件夹中创建一个 CSS 文件作为文件夹的子文件夹，其中包含您 Shiny 的应用程序。该文件的内容应该是:

.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;
}

我已将上面的 slider 设置为红色和绿色。页面上的每个 slider 都使用 .js-irs-n 标识，其中 n 是从 0 开始的数字。您可以通过改变颜色代码来自定义颜色，例如上面的#a00 和#d01010。你可以使用 colour picker如果有帮助。

使用红色、绿色和蓝色 slider 的示例: