在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文件，以便它们可以访问它们。但我真的很茫然，我以前从未做过网络开发 所以，如果有人可以一步一步地引导我，那将是非常棒的！我想要一个蓝色滑块（默认颜色），但也有绿色和红色滑块。再次感谢！

Answer 1

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

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

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

使用红色，绿色和蓝色滑块的示例：

Answer 2

我知道，之前我没有使用过那个库，但是如果你的iFrame来自同一个父域，那么这可能会对你的情况有用，如果没有，我不确定你会发现解决方案，除非Shiny专门提供解决方案。

$('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>"));

}）;

然后相应地编辑样式。同样，不确定您使用此源以及内容的方式/位置。我确信它可能在一个单独的域上。很抱歉。