How to show labels in jqxknob

[dopotoParticipant]

Looking at this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknob/index.htm#demos/jqxknob/knob-double-pointer.htm

Is it possible to show a label with the current value next to each circle?

[Yavor DashevParticipant]

Hi dopoto,

Yes, this functionality is possible using the following code snippets.

In the ngAfterViewInit method

  ngAfterViewInit() {
      let circleKnob = document.querySelectorAll("circle[r='10']"),
                firstValueHolder = document.createElement('div'),
                secondValueHolder = document.createElement('div'),
                knobValue = $('#knob').val();

            document.body.append(firstValueHolder);
            document.body.append(secondValueHolder);

            firstValueHolder.innerText = knobValue[0];
            secondValueHolder.innerText= knobValue[1];

            firstValueHolder.style.color = 'red';
            secondValueHolder.style.color = 'red';

            firstValueHolder.style.position = 'absolute';
            firstValueHolder.style.top = circleKnob[0].getBoundingClientRect().top + 20 + 'px';
            firstValueHolder.style.left = circleKnob[0].getBoundingClientRect().left + 'px';

            secondValueHolder.style.position = 'absolute';
            secondValueHolder.style.top = circleKnob[1].getBoundingClientRect().top + 20 + 'px';
            secondValueHolder.style.left = circleKnob[1].getBoundingClientRect().left + 'px';
  }

And in the onChange event handler:

 
myKnobOnChange(event: any): void {
                let circleKnob = document.querySelectorAll("circle[r='10']")

                firstValueHolder.style.top = circleKnob[0].getBoundingClientRect().top + 20 + 'px';
                firstValueHolder.style.left = circleKnob[0].getBoundingClientRect().left + 'px';

                secondValueHolder.style.top = circleKnob[1].getBoundingClientRect().top + 20 + 'px';
                secondValueHolder.style.left = circleKnob[1].getBoundingClientRect().left + 'px';

                firstValueHolder.innerText = event.args.value[0];
                secondValueHolder.innerText= event.args.value[1];
                this.myLog.nativeElement.innerHTML = 'Values: ' + event.args.value;
    };

Also a complete jsfidlle for this scenario: http://jsfiddle.net/7xqt8091/

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts