Issue Adding Percentage Symbol After knobInput Display in R Shiny

Question

I have been attempting to add a percentage symbol after the number display of my knobInput in a Shiny app.

After consulting similar posts that address the issue for directly using the jQuery library and attempting to follow the instructions on the repo, I thought I could make the change by adding a short script via a tag. Thus far, I've been trying variations of this in my UI file:

...
       knobInput(inputId = "population",
                         label = "Percentage of the Population",
                         min = 0,
                         max = 100, 
                         value = 100,
                         width = '100%',
                         displayPrevious = T),
             tags$script(HTML("
    $(\".dial\").knob({
      'draw' : function () 
      {
        $(this.i).val(this.cv + '%')
      }
    });")),
...

This does not cause any issues and the knobInput displays normally, but no percentage symbol is shown in the display. I have also tried nesting the script tag in the head tags like:

...
             tags$head(tags$script(HTML("
    $(\".dial\").knob({
      'draw' : function () 
      {
        $(this.i).val(this.cv + '%')
      }
    });"))),
...

but this does not help either. Should I attempt a different approach? Or am I implementing something incorrectly?

Answer 1

I have done the same requirement with roundSlider, check the below demo:

DEMO

This can be highly customizable based on your requirement, hope this helps you.