jQuery UI Widgets Forums Angular How to show labels in jqxknob

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • How to show labels in jqxknob #121349

    dopoto
    Participant

    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?

    How to show labels in jqxknob #121350

    Yavor Dashev
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.