0
497
ViewsHow to change the sliderInput knob (thumb) color in shiny?
I am trying to change the sliderInput knob/thumb color. Checked online and I saw some comments about using .irs-slider. However, it does not work for me in the following code:
library(shiny)
ui <- fluidPage(
tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar, .js-irs-0 .irs-slider {background: red}")),
sliderInput("slider1", "Slider 1",min = 0.1, max = 1, value = 0.4, step = 0.05),
)
server <- function(input, output, session){}
shinyApp(ui = ui, server=server)
This codes changed the color of everything except for the knob. Any help would be appreciated.
UPDATE: Thanks to @Domingo for his answer. The following code will change the knob too. However, when I click on the knob to move it, it turns to white color. How can I change the knob color on click to a different color (not red) e.g. black?
library(shiny)
ui <- fluidPage(
tags$style(
HTML(
".js-irs-0 .irs-single,
.js-irs-0 .irs-bar-edge,
.js-irs-0 .irs-bar,
.js-irs-0 .irs-handle
{
background: red;
}
")),
sliderInput("slider1",
"Slider 1",
min = 0.1,
max = 1,
value = 0.4,
step = 0.05),
)
server <- function(input, output, session){}
shinyApp(ui = ui, server=server)
·
Juan Pablo Isaza
1 answers
Answer question0
You can add the .irs-handle class to your style to change the css of the knob:
library(shiny)
ui <- fluidPage(
tags$style(
HTML(
".js-irs-0 .irs-single,
.js-irs-0 .irs-bar-edge,
.js-irs-0 .irs-bar,
.js-irs-0 .irs-slider
{
background: red;
}
.irs-handle {
background: cyan !important;
}
.irs-handle:active {
background: green !important;
}
")),
sliderInput("slider1",
"Slider 1",
min = 0.1,
max = 1,
value = 0.4,
step = 0.05),
)
server <- function(input, output, session){}
shinyApp(ui = ui, server=server)
·
Juan Pablo Isaza
Report
Answer question