如何修改Quarto交互式文档中Shiny滑块的颜色？

核心原因 #

Quarto中运行Shiny时，默认样式优先级较高，且Shiny组件会被包裹在.shiny-app容器内，之前的CSS选择器未匹配到正确层级，导致样式无法覆盖默认设置。

有效解决方案 #

方法1：全局修改所有滑块样式 #

在fluidPage内通过tags$style添加带容器前缀的CSS选择器，强制覆盖默认样式：

library(shiny)

fluidPage(
  tags$style(HTML("
    .shiny-app .irs-bar {
      background: #ff0000 !important;
      border-top-color: #ff0000 !important;
      border-bottom-color: #ff0000 !important;
    }
    .shiny-app .irs-bar-edge {
      background: #ff0000 !important;
      border-color: #ff0000 !important;
    }
    .shiny-app .irs-single {
      background: #ff0000 !important;
      border-color: #ff0000 !important;
      color: #fff !important;
    }
    .shiny-app .irs-handle {
      border-color: #ff0000 !important;
      background: #fff !important;
    }
  ")),
  sliderInput("num", "Number", 0, 10, 5)
)

方法2：针对单个滑块修改（通过ID） #

如果只需修改特定滑块，用滑块ID作为选择器前缀：

fluidPage(
  tags$style(HTML("
    #num .irs-bar {
      background: #ff0000 !important;
      border-top-color: #ff0000 !important;
      border-bottom-color: #ff0000 !important;
    }
    #num .irs-bar-edge {
      background: #ff0000 !important;
      border-color: #ff0000 !important;
    }
  ")),
  sliderInput("num", "Number", 0, 10, 5)
)

方法3：使用shinyWidgets包 #

确保setSliderColor正确调用，可通过滑块顺序或ID指定目标：

library(shinyWidgets)

fluidPage(
  setSliderColor("DeepPink", sliderId = 1),
  sliderInput("num", "Number", 0, 10, 5)
)

方法4：通过SCSS文件加载 #

在Quarto的YAML中指定SCSS文件路径，确保样式被正确加载：

---
title: "修改滑块颜色"
format: 
  html:
    css: styles.scss
runtime: shiny
---

对应的SCSS文件内容（styles.scss）：

.shiny-app .js-irs-0 .irs-bar {
  border-top-color: #d01010;
  border-bottom-color: #d01010;
  background: #a00;
} 

.shiny-app .js-irs-0 .irs-bar-edge {
  border-color: #d01010;
  background: #a00;
}

.shiny-app .js-irs-0 .irs-single {
  background: #a00;
  border-color: #d01010;
  color: #fff;
}

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