Select the range from the slider

[saranshchat]

I want to select the range from the slider between two handlers. When I click the handler the range should be selected but I searched all the events in the documentation but not got the solution.Can anyone help me out for this.

[kiqq]

If you want to get values of handles after click, even if handle is not moved, i think you can bind to change event.

[saranshchat]

@kiqq thanks for response but how to bind that change event because I am not getting how to implement this. Please provide some definition

[saranshchat]

@kiqq I have bind this to change event but in console this.handle is undefined and when checked value it shows- Uncaught TypeError: Cannot read property 'firstHandle' of undefined. This is my html where I bind the event : <nouislider id="timeSlider" #slider [tooltips]="tooltips" [config]="keyConfig" [(ngModel)]="timeInterval" (ngModelChange)="onChange(this, $event)"></nouislider>

and my component is where I used the logic is:

 onChange(slider, value: any) {
    debugger;
    this.firstHandle =this.slider.slider.nativeElement.querySelector('.noUi-handle[data-handle=\'0\']');
    console.log(this.firstHandle);
    //console.log('Value changed to', value);
  }

[kiqq]

this.slider.slider.nativeElement should be this.slider.nativeElement

[kiqq]

Binding to change event: <nouislider (change)="onChange($event)"></nouislider>

onChange(values) {
   //values[0] - value for handle 0
   //values[1] - value for handle 1 and so on 
}

[saranshchat]

@kiqq the code you above suggested yields only two values and that would be always value[0] and value[1] of the handle and not the one which user clicks. In other words I want tha thandle value which the user clicks.

[kiqq]

I am just answering your question:

I want to select the RANGE from the slider between two handlers.

Your actual problem was solved here https://github.com/tb/ng2-nouislider/issues/112#issuecomment-330042911 which will get you selected handle index. Modify it to get value or get value from ngModel.

[saranshchat]

@kiqq thanks your help resulted me to solve my problem and I can select the handle upon clicking but there is one issue ,In my module I have given one functionality that when the handler is clicked or dragged that particular range get selected and I have given the font color changed on that selection but this functionality works only upon clicking on the handler and not when the handler is dragged. When I drag the other handler(if there are more than one handler),the later color is not changed and only the first handler color is red .See this snap:- when I click on the handler 19 the color changed to red but when I drag the range the first range changes to red. How can I get the active draggable element. This is I am not getting but done some coding. Suggest me where I am wrong. See the app.component : -

onHandleClick() {
    let element: Element = document.getElementsByClassName("noUi-active")[0]; //handle has this class until mouse button is released
    let element1: Element = document.getElementsByClassName("noUi-draggable")[0];
    if (element != undefined && element1 != undefined) {
      this.handleIndex = parseInt(element.attributes.getNamedItem("data-handle").value); //handle has attribute data-handle with value of handle index
    }
    let uiConnect: any;
    let highlightedElemnets = document.getElementsByClassName("highlightedDragger");
    if (highlightedElemnets.length) {
      highlightedElemnets[0].className = 'noUi-connect noUi-draggable';
    }

    /**
    /*The colour change ogf handler is working only on clicking the handle but on the drag of the handle 
    /*only the the first range is color is changing
    /*not getting the active draggable element
    */
    if (element) {
      if (this.handleIndex % 2 == 0) {
        uiConnect = element.parentElement.nextElementSibling;
        uiConnect.className = uiConnect.className + " highlightedDragger";
        this.cdRef.detectChanges();
        this.flag = true;
      }
      else {
        uiConnect = element.parentElement.previousSibling;
        uiConnect.className = uiConnect.className + " highlightedDragger";
        this.cdRef.detectChanges();
        this.flag = true;
      }
    } else {
      uiConnect = element1; //.parentElement.nextElementSibling;
      uiConnect.className = uiConnect.className + " highlightedDragger";
      this.cdRef.detectChanges();
      this.flag = true;
    }
  }

[kiqq]

How can I get the active draggable element?

That's great question, and there is no solution similar to your approach as far as I'm aware of.

I strongly recommend you to use already mentioned code from https://github.com/tb/ng2-nouislider/issues/112#issuecomment-330042911, which:

1. Makes your code much much clearer,
2. Solves your problem with dragging - the only disadvantage is that method is called twice when dragging - onece for right handle and onece for left handle.

That's how it looks like:

  constructor(private el: ElementRef) { }
  uiConnect: Element;

  onStart(handleIndex: number) {
    let activeHandle: Element = this.el.nativeElement.querySelector('[data-handle="' + handleIndex + '"]');

    if (this.uiConnect) {
      this.uiConnect.classList.remove('highlightedDragger');
    }

    if (handleIndex % 2 == 0) {
      this.uiConnect = activeHandle.parentElement.nextElementSibling;
    }
    else {
      this.uiConnect = activeHandle.parentElement.previousElementSibling;
    }
    this.uiConnect.classList.add('highlightedDragger');
  }

[saranshchat]

@kiqq thank you very much I got the method to do through events and some little logic to cpature the changes in the dragging of the handler