How do you change slider colour in a quarto interactive document?

Question

I am trying to change the slider colour in shiny. I've tried a few approaches, including modifying the css in a few ways below but these don't seem to work:

---
title: "Untitled"
format: html
runtime: shiny
---

```{r}
library(shiny)
sliderInput("num", "Number", 0, 10, 5)
```


```{r}
mycss <- "
.irs-bar,
.irs-bar-edge,
.irs-single,
.irs-grid-pol {
  background: red;
  border-color: red;
}
"

fluidPage(
  tags$style(mycss),
  sliderInput("num", "Number", 0, 10, 5)
)
```

```{r}
library(shinyWidgets)

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

```{r}
fluidPage(
  
  tags$head(
    tags$style(HTML("
      .irs-bar {
        background: red !important;
      }
      .irs-line {
        background: red !important;
      }
      .irs-handle {
        background: red !important;
      }
    "))
  ),
  
  sliderInput("num", "Number", 0, 10, 5)
)
```

I've also tried add the following to my scss file:

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

Answer 1

Try the following,

---
title: "Untitled"
format: html
runtime: shiny
css: shiny_style.css
---

```{r}
library(shiny)
sliderInput("num", "Number", 0, 10, 5)
```

shiny_style.css

.irs--shiny .irs-bar {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  background: red;
}


.irs--shiny .irs-single {
  color: #fff;
  background-color: red;
}

---

---

Careful observation with browser developer tools like inspect element may help you to find out which CSS selector to target to get desired changes.