CODEWITHSUNDEEP
cssrshiny
Vicb
Vicb

Reputation: 51

RShiny-CSS reactive message

I'm using Shiny for a while and recently started customize my app with CSS which is pretty cool. I managed to show a message box when the pointer goes over a particular element but now I would like to show a variable. For example in the following app when the mouse goes on the slider button, inside the message box I would like to compute the slider value i.e "input$test" : 

#### ui.R

shinyUI(fluidPage(
tags$head(tags$style(HTML('

                        .irs.js-irs-0.irs-with-grid .irs-slider.single:hover:after {
                        content: "SLIDER VALUE HERE";
                        background: #333;
                        background: rgba(0,0,0,.8);
                        border-radius: 5px;
                        bottom: 26px;
                        color: #fff;
                        left: 20%;
                        padding: 5px 15px;
                        position: absolute;
                        width: 220px;
                        text-align: center;
                        }

                        '))),

sliderInput("test", "TEST:", 
          min=0, max=1000, value=500)
))

#### server.R

library(shiny)
shinyServer(function(input, output) {
})

Thanks for your help.

Upvotes: 1

Views: 227

Answers (1)

Vicb
Vicb

Reputation: 51

Well this works, hope it will help someone else :

#### ui.R

shinyUI(fluidPage(


  uiOutput("htmltest"),

  sliderInput("test", "TEST:", 
          min=0, max=1000, value=500)

))

#### server.R

shinyServer(function(input, output) {


output$htmltest <- renderUI({
  txtx=paste('.irs.js-irs-0.irs-with-grid .irs-slider.single:hover:after {
                        content: "',input$test,'";
         background: #333;
         background: rgba(0,0,0,.8);
         border-radius: 5px;
         bottom: 26px;
         color: #fff;
         left: 20%;
         padding: 5px 15px;
         position: absolute;
         width: 220px;
         text-align: center;
}',sep="")

  tags$head(tags$style(HTML(txtx)))
})

})

Upvotes: 1

Related Questions