Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

499
Visualizações
How 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. enter image description here

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)
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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)
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda