3

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?

Max Feinberg
  • 810
  • 1
  • 6
  • 21

2 Answers2

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.

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Thank you! Here is the code that I'm using now that functions as desired. ``` tags$script(HTML(" $(\"#INPUT_ID\").knob({ 'draw' : function () { $(this.i).val(this.cv + '%') } });")),``` – Max Feinberg May 13 '19 at 20:27
  • Actually are you expecting the solution with knob only? Since it seems there was a problem with the cdn so I can't run with this. So that I have achieved the same thing with roundSlider, if you are facing any problem with integrating this then you can let me know. Thanks.. – Soundar May 14 '19 at 06:59
0

There is an for that in knobInput pre=, and then put your symbol

Teguin Davy Ange
  • 3
  • 1