Shiny中SliderInput刻度及刻度标签分区域着色问题求助

嘿，我来帮你搞定这个SliderInput刻度颜色的问题！你的代码没生效是因为用的CSS选择器不对——.irs-grid-pol-left和.irs-grid-pol-right其实是Shiny默认给最左、最右两个刻度点加的类，没法按0-5、5-10这样的区间来区分刻度。下面是修改后的可行方案：

修改后的完整代码 #

library(shiny)
shinyApp(
  ui <- fluidPage(
    tags$style(type = "text/css",
               /* 针对1-5区间的刻度标签和刻度线设置红色 */
               ".irs-grid-text:nth-child(-n+5) {color: red;}",
               ".irs-grid-pol:nth-child(-n+5) {background: red;}",
               /* 针对6-10区间的刻度标签和刻度线设置蓝色 */
               ".irs-grid-text:nth-child(n+6) {color: blue;}",
               ".irs-grid-pol:nth-child(n+6) {background: blue;}"),
    sliderInput("bins", "Number of bins:", min = 1, max = 10, value = 1)
  ),
  server <- function(input, output) {}
)

代码说明 #

• 我们用CSS的:nth-child()伪类来精准定位不同区间的刻度元素：
  • -n+5表示选择前5个元素（对应刻度1-5），把它们的文字颜色和刻度线背景设为红色
  • n+6表示选择从第6个开始的所有元素（对应刻度6-10），设置为蓝色
• 注意刻度线用background属性设置颜色，而刻度标签用color属性，这样两者都能同步变色

这样运行代码后，你就能看到Slider上1-5的刻度（包括标签和线）是红色，6-10的是蓝色啦！

内容的提问来源于stack exchange，提问作者SJB