Label does not display for sliderTextInput

Question

I am using the sliderTextInput widget from the shinyWidgets package. The slider works fine, but my label for the slider is not displayed. Instead of my label, "[object Object]" is displayed. How can I correct this problem? Here is my reprex.

# reprex for slider problem
library(shiny)
library(shinyWidgets)

dateD <- seq.Date(as.Date("2017-01-01"),
    Sys.Date()-1,by="day")
dateC <- character()
for (i in 1:length(dateD)) {
    dateC[i] <- format(dateD[i],"%b %d, %Y")
}
strtRang <- c(dateC[1],dateC[length(dateC)])

ui <- fluidPage(
    sliderTextInput("Dates",
        label="Choose starting and ending dates:",
        choices=dateC,
        selected=strtRang,
        dragRange = TRUE,
        width="100%")
)
server <- function(input, output,session) {
    observe({
        updateSliderTextInput(session,inputId="Dates",
            tags$b(tags$span(style="color:blue",
            label="Choose starting and ending dates:")),
            choices = dateC,
            selected=strtRang)
    })
}
shinyApp(ui, server)

Have you tried replacing `tags$b(tags$span(style="color:blue", label="Choose starting and ending dates:"))` with `label="Choose starting and ending dates:"`? — Skaqqs, Jul 01 '21 at 19:47
It seems you have a nesting problem. You're passing `label=` to the `tags$span()` function, not the `updateSliderTextInput()` function. — MrFlick, Jul 01 '21 at 19:53

score 1 · Accepted Answer · answered Jul 01 '21 at 20:17

The reason is label is expecting a string but not a shiny.tag class object. Even if you provide the HTML string, like <b>xxxxx</b>, it will still not work, because the creator of this function did not allow you to input HTML, only string. What string you provide will be what you see, no HTML parsing.

If you want to add color and font weight dynamically, do this:

# reprex for slider problem
library(shiny)
library(shinyWidgets)
library(shinyjs)
dateD <- seq.Date(as.Date("2017-01-01"),
                  Sys.Date()-1,by="day")
dateC <- character()
for (i in 1:length(dateD)) {
  dateC[i] <- format(dateD[i],"%b %d, %Y")
}
strtRang <- c(dateC[1],dateC[length(dateC)])

ui <- fluidPage(
  shinyjs::useShinyjs(),
  sliderTextInput("Dates",
                  label='Choose starting and ending dates:',
                  choices=dateC,
                  selected=strtRang,
                  dragRange = TRUE,
                  width="100%")
)
server <- function(input, output, session) {
  observe({
    updateSliderTextInput(session,inputId="Dates",
                          label = "Choose starting and ending dates aaaa:",
                          choices = dateC,
                          selected=strtRang)
    shinyjs::runjs("$('.shiny-input-container:has(input[id=\"Dates\"]) > label').css({fontWeight: 900, color: 'blue'})")
  })
  
}
shinyApp(ui, server)

If the style does not need to be set dynamically, easier:

ui <- fluidPage(
  sliderTextInput("Dates",
                  label='Choose starting and ending dates:',
                  choices=dateC,
                  selected=strtRang,
                  dragRange = TRUE,
                  width="100%"),
  tags$script(HTML("$('.shiny-input-container:has(input[id=\"Dates\"]) > label').css({fontWeight: 900, color: 'blue'})"))
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

I am finding, in my original application, that the solution works to display the label, but not to make it blue. The slider is within a shiny module in my application (although not in my reprex) and I suspect this is affecting the js script. — Phil Smith, Jul 01 '21 at 20:51
In a module you need to change the id inside `input[id=\"Dates\"]` it will be `input[id=\"ModuleID-Dates\"]` — lz100, Jul 01 '21 at 21:04
I also want to make the font size 26px, but when I add "font-size: 26px," to the script like this: css({fontWeight: 900, font-size: 26px, color: 'blue'}) the blue color returns to black and the font-size does not change. Why is that? — Phil Smith, Jul 04 '21 at 00:41
We are using JavaScript to set CSS attributes, dash - is not accepted, you need to use `fontSize` instead — lz100, Jul 05 '21 at 19:59
I tried that (fontSize: 26px) too, but it does not work. In sum: fontWeight: 900, color: 'blue' works fine, but fontWeight: 900, fontSize: 26px, color: 'blue' gives black with normal weight and no change in font size. — Phil Smith, Jul 07 '21 at 18:57
again, this is js not normal CSS, so use `{fontWeight: 900, color: 'blue', fontSize: '26px'}`. It must be `'26px'` in quotes. `26px` without quotes means an object named this, but you want a string not object. When it cannot find the object 26px, triggers an error. — lz100, Jul 07 '21 at 20:11
That works. Thanks for sticking with me on this. I am trying to learn Javascript, but I still have a long way to go. Your patience is appreciated. — Phil Smith, Jul 07 '21 at 21:44

Label does not display for sliderTextInput

1 Answers1