How to stop slider

[sersart]

I'm looking for a simple solution to stop the slider at certain position. For example, my range is 0 - 100 and I want to slider not to move less then 20 and not more 60. Thanks in advance for help!

[kiqq]

<nouislider [config]="sliderConfig"></nouislider>

  sliderConfig: any = {
    start: 30,
    step: 10,
    padding: 20, //<------ 
    range: {
      'min': 0,
      'max': 80
    }
  };

Range max changed to 80 - there is no paddingMin and paddingMax, padding is the same for both sides: https://github.com/leongersen/noUiSlider/issues/771 That's probably because we can change range getting rid of inaccessible values on slider.

[sersart]

Thank you for your respond. Another question, to add dynamically, additional handler to existing (before or after), we have to know index selected handler. How to get index selected or current handler?

[kiqq]

Here is how I would do this. I am not sure if this is best solution, but slider events don't expose handle indexes:

    <nouislider *ngIf="sliderReady" 
        [config]="sliderConfig"
        [(ngModel)]="someRange" 
        (start)="onHandleClick()"> 
    </nouislider>
    <button (click)="addHandleAbove()">Add handle above</button>

  public someRange: number[] = [30];
  public sliderConfig: any = {
    step: 1,
    padding: 20, //<------ 
    range: {
      'min': 0,
      'max': 80
    }
  };

  public handleIndex = 0; //last active handle index
  public sliderReady: boolean = true; //for slider recreation
  constructor(private cd: ChangeDetectorRef) { } //for slider recreation

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

  addHandleAbove() {
    this.sliderReady = false;
    this.cd.detectChanges(); 

    if (typeof this.someRange === "number") { this.someRange = [this.someRange]; }
    let newHandleValue = this.someRange[this.handleIndex] + 1;
    if (this.someRange.length - 1 == this.handleIndex) {
      this.someRange.push(newHandleValue);
    }
    else {
      this.someRange.splice(this.handleIndex + 1, 0, newHandleValue);
    }

    this.sliderReady = true;
  }

[sersart]

Thanks, good coding. I checked project source code. Please check line 143 this.slider.on('start', (values: string[], handle: number, unencoded: number[]) => { this.start.emit(this.toValues(values)); }); start event already has information about handle, but author of the project does not emit to output if we change this.start.emit(this.toValues(values)) to this.start.emit([this.toValues(values), handle]);

and then we can onHandleClick($event) { this.handleIndex = $event[1]; } Please let me know what do you think.

[kiqq]

Ohh, that's nice and works even better. Just beware of updates.

[sersart]

No problem with updates, look this code. I added Directive

import { Directive, Self, EventEmitter, OnInit, OnDestroy, Output } from '@angular/core'; import { NouisliderComponent } from 'ng2-nouislider';

@Directive({ selector: '[handler-selected]' })

export class NouisliderSelectedDirective implements OnInit, OnDestroy { @Output() public selected: EventEmitter = new EventEmitter(true);

constructor(@Self() private sliderRef: NouisliderComponent) {}

ngOnInit(): void {
    this.sliderRef.slider.on('start', (values: string[], handle: number, unencoded: number[]) => {
        this.selected.emit(handle);
    });
}

ngOnDestroy(): void {
}

}

Now we can use

<nouislider handler-selected (selected)="onHandlerSelect($event)"

Thanks for you help and have a good day

[kiqq]

Great. I have been wondering how to achieve this. I didn't use many custom directives so far. New skill added :) Thanks, happy coding

[ku-santosh]

Hi,

I am beginner here, can you provide source code plz I want to apply this to my code

Thanks,

[saranshchat]

@ku-santosh which source code you are refering to