Jquery-knob in foreignObject

[tonmoycsedu]

Hi,
I am trying to add a jquery knob to my svg using 'foreignObject' tag. Everything works fine, but I can't seem to see the input value in the knob. I even tried explicitly setting the 'data-displayinput' attribute to be 'true', but still does not work. Any idea what might be the issue? Thanks.

<foreignObject class="label-bg" id="0_node" x="0" y="0" width="100" height="50" style="inline-block"><div style="display:inline;width:50px;height:50px;"><canvas width="100" height="100" style="width: 50px; height: 50px;"></canvas><input class="dial" data-displayprevious="true" data-displayinput="true" id="0_knob" name="Unhealthy_Days" data-min="2.5" data-max="5.5" value="2.5" data-step="0.1" style="width: 29px;height: 16px;position: absolute;vertical-align: middle;margin-top: 16px;margin-left: -39px;border: 0px;background: none;font: bold 10px Arial;text-align: center;color: rgb(102, 204, 102);padding: 0px;-webkit-appearance: none;"></div></foreignObject>