更改sliderInput的顏色閃亮演練

我知道，更改Shiny中sliderInput的顏色需要更改css文件中的某些內容，我嘗試使用源查看器查看函數sliderInput()，但它不適用對我來說很有意義，因爲我對HTML和CSS瞭解不多。我猜它必須在這裏某處改變：更改sliderInput的顏色閃亮演練

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文件，以便它可以訪問它們。但是我在這裏真的很茫然，我從來沒有做過網絡開發。
所以，如果有人能夠一步一步地走過我，那將是非常棒的！我想有一個藍色的滑塊（默認顏色），但也是一個綠色和紅色的。再次感謝！

來源

2015-06-16 jean

你可以共享一個URL或某種東西嗎？ =）我們並不是都可以訪問Shiny插件或者您正在使用的任何插件。您是否嘗試使用開發人員工具檢查頁面，並查看滑塊的顏色來自哪裏，它應該顯示確切的樣式表。右鍵單擊滑塊，然後單擊在Chrome中檢查元素。 –

您好邁克爾感謝您的回答我檢查了網站的代碼，但它遠遠沒有透明，特別是對於sliderInput，因爲一切都嵌入在Shiny中，本身不是插件，而是R統計上的Web開發庫開源軟件。我認爲我的問題的答案必須來自熟悉CSS和JavaScript的人，但主要來自熟悉R和有光澤的人。 – jean

至於分享我的代碼，我不能做到這一點，但感興趣的例子很容易重現，因爲它是閃亮的一個最基本的功能之一，在這裏給出例子：[link]（http://shiny.rstudio.com/gallery /isolate-demo.html） – jean

按照教程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。

例使用紅色，綠色和藍色滑塊：

sliders

來源

2015-06-22 07:15:20

非常感謝您的回答尼克，正是我在尋找的!!!!!!!! 但是還有一件事：所以我使用了includeCSS函數並創建了該文件，但該命令將我所有的滑塊都放在同一顏色中，因爲它們共享相同的ID，我猜。如何擁有不同顏色的滑塊？這是我的原始問題？但非常感謝你，這是一個偉大的第一步！ – jean

我試着改變滑塊的inputId，但它不再識別參數 – jean

@jean更新的例子包括兩個不同的滑塊一個紅色和一個綠色。 –

我明白了，我之前沒有使用過該庫，但是如果您的系統中的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>"));

}）;

然後相應地編輯樣式。再次，不知道你是如何/在哪裏使用這個來源以及你的內容。我相信它可能在一個單獨的域上。非常抱歉。

來源

2015-06-17 17:19:37

好的，邁克爾謝謝，這是一個很好的答案，你可以更具體到哪裏把這行代碼？並且向我解釋一些關於你如何提出這個問題的方法，以及如何使用你的答案來完成像這樣的其他改變（關於如何在Shiny中使用css而不是一個我很難找到的閃亮網站的教程進入非JavaScript/CSS用戶）？ – jean

更改sliderInput的顏色閃亮演練

回答

相關問題