search

tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
185 stars 114 forks source link

Slider snaps on manually setting a value between steps #224

Open tenglongroy opened 3 years ago

tenglongroy commented 3 years ago

This issue is carried from the nouislider.js package.

The behaviour I need from the slider is described here: https://github.com/leongersen/noUiSlider/issues/436#issuecomment-96971708

To be specific, I need the NoUiSlider able to get input value between steps. For example, see below my code, if I want to manually type a number of 7500 in , then NoUiSlider will automatically set the value to 10000. If I set the step to be 1, then the performance of dragging the handle becomes unacceptable.

The link above shows a good solution, by having an extra option 'exactInput' to allow for exact value between steps. But ng2-nouislider wraps nouislider.js already, how can I change the source code of nouislider.js? And presumably I manage to change the source code in nouislider.js, it changes still won't be carried over to Azure DevOps, so it's a dead end?

My code is as below

<input type="text" name="propertyHomeWorthInput" [(ngModel)]="propertyHomeWorth">
<nouislider [config]="money100MConfig" [(ngModel)]="propertyHomeWorth"></nouislider>
money100MConfig: any = {
    connect: 'lower',
    range: {
        min: [0, 5000],
        '25%': [1000000, 10000],
        '50%': [2000000, 100000],
        '75%': [50000000, 1000000],
        max: 100000000
    }
};
tcernera commented 3 years ago

I am having this same issue. From leongersen : "As of noUiSlider 14.6.2 (just released), you can use the exactInput argument to the set method to bypass the slider stepping."

Is this going to carry over?

tenglongroy commented 3 years ago

Hi @tcernera , glad that my PR could help people! I just checked package.json in this project, nouislider is required to be later than version 9.x in peerDependencies, so I guess the changes will be carried over.

"peerDependencies": {
    "@angular/common": ">=2.x",
    "@angular/core": ">=2.x",
    "nouislider": ">=9.x"
}
tcernera commented 3 years ago

@tenglongroy I am having some trouble actually implementing this. Any suggestions? Here is a stackblitz with a use case https://stackblitz.com/edit/angular-6-nouislider-fdgktg?file=app%2Fslider-overview-example.ts