[Résolu] Shiny : attribuer un style à des éléments renderUI

[Fred Santos]

Bonjour,

Voici un problème (au demeurant d'une futilité épatante) auquel je suis confronté avec une barre "sliderInput" d'une interface shiny. Cette interface ayant un css avec des couleurs bien définies, je souhaiterais que tout soit bien harmonisé.

Un sliderInput figurait jusqu'ici dans ui.R, que je faisais précéder du tag suivant pour lui donner une splendide couleur bleu turquoise :D :

Code : Tout sélectionner

tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: #0098B6}"))

Depuis, j'ai décidé de rendre ce slider réactif en générant la borne max automatiquement à partir d'autres choix de l'utilisateur, et je le génère plutôt ainsi :

Code : Tout sélectionner

## Dans ui.R :
tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: #0098B6}")),
uiOutput("reglette")

## Dans server.R :
output$reglette <- renderUI(
       sliderInput("minNb", label="Minimum number", value=10, min=1, max=maximum())
       )


Sauf que désormais, j'ai un souci bizarre : initialement, le sliderInput a bien la couleur désirée, mais dès la première fois où la borne max doit être recalculée et modifiée, le sliderInput reprend la couleur bleue roi par défaut de shiny. Je suppose qu'il faudrait pouvoir définir un style dans server.R au moment où le sliderInput est recalculé, mais tous mes essais se sont soldés par des plantages et des messages d'erreur.
Question très générale donc, comment faut-il faire pour attribuer une apparence particulière aux éléments d'interface générés par renderUI ?

Merci !

[Melissa Lepage]

Bonjour,

Je pense que vous avez la bonne façon de faire, car lorsque j'essaie la même chose que vous mais avec un tag différent, celui-ci est conservé même en changeant la borne max (en tout cas il prend le dessus sur le by default)
Voici mon code d'essai:

ui.r

Code : Tout sélectionner

shinyUI(fluidPage(
  tags$style(type = "text/css", "
      .irs-bar {width: 100%; height: 25px; background: #B60098;}
      .irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 0px; width: 20px;}
      .irs-line {border: 1px solid black; height: 25px; border-radius: 0px;}
      .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;}
      .irs-grid-pol {display: none;}
      .irs-max {font-family: 'arial'; color: black;}
      .irs-min {font-family: 'arial'; color: black;}
      .irs-bar {background: #B60098}
      .irs-slider {width: 30px; height: 30px; top: 22px;}
    "),
  #tags$style(HTML(".js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: #B60098}")),
  numericInput(inputId="max",label="maximum",value=18),
  uiOutput("reglette")
))
 

server.r

Code : Tout sélectionner

shinyServer(function(input, output, session) {
 
  output$reglette <- renderUI(
    sliderInput("minNb", label="Minimum number", value=10, min=1, max=input$max)
  )
 
})

Bon courage,
Mélissa

[Fred Santos]

Bonjour Mélissa,

Merci beaucoup, ça fonctionne parfaitement ! (Et en plus, je serais presque à deux doigts d'adopter la barre violette, pour la peine :D)

Problème résolu !