Do not snap on manually setting a value

[janein]

Hi,

first of all - great script!

My only problem is this:
I have a slider with steps and snapping active (the user should be able to drag in certain steps only).
But what I want to have is the possibility of setting a value manually (via input) which doesn't not fit to a step.

i.e.:
range from 0 - 1000, steps 100.
user should be able to set 0, 100, 200, ..., 800, 900, 1000 via the slider-drag.
AND user should be able to set any value (like 123) via an input without the slider snapping to the nearest step (100). (if the handler would be set correctly too, it would be just perfect!)

Is this possible?

thanks,
janein

[leongersen]

Yes, don't set a step. Then, on the change event, manually round to value to the nearest step and set it to the slider.

I've set up an example demonstrating this.

[janein]

Hi,
thanks for the quick answer!
Works quite good, but it's not that easy in my case.

First, i have a non-linear range with various steps sizes. But I could get this working by iterating through the steps.

The bigger issue is, that with your solution the user sees a "non-step" value when dragging and it adjusts when the handle is released.
What I want to do is to snap to the steps while(!) dragging.

What I thought could work:
When starting to drag, enable the snap option and after dragstop, disable the snap option.
Is it possible? And if so, what are the events I have to bind this to?

[janein]

Hi,

I finally wound a "not that beautiful" solution:

When passing the parameter "exactInput" to true, the snapping works only on "move" and "tap".

I pass the action-types to setHandle and then do or do not execute getStep:

// EDIT: do not snap to next step when action is not move and exactInput is true
 if(["move", "tap"].indexOf(action) >= 0 || !options.exactInput) {
   to = $Spectrum.getStep( to );
 }

Here my working example: https://jsfiddle.net/4xe0jq3y/1/ (scroll down below my minified version to see the call).

Like I said it's not a perfect solutions, but maybe you could think about integrating it into your code.

Should I send you my file?

Yours,
janein

[BenniG82]

Sorry for commenting on a "zombie" but I had the same requirement and found this issue via google.
Maybe someone else might find this issue is happy to find a possible solution here.
I solved it by listening to the start and end Events of nouislider and setting the step-Option to my desired step size on start and setting step to 0 on end.

Works flawless even with the ng-nouislider in Angular.
Code-Extract (Angular example):

component.html

<nouislider #slider *ngIf="ready" [connect]="true" [min]="min" [max]="max"
            [step]="stepInternal"
            (start)="setStep(step)"
            (end)="setStep(0)"
</nouislider>

component.ts

export class SliderComponent implements [...] {
    [...]
    @Input()
    public min: number;

    @Input()
    public max: number;

    // Step-Size given from the caller of this slider-component
    @Input()
    public step: number;

    // Step-Size given to ng-nouislider
    public internalStep: number;
    [...]
    public setStep(step: number): void {
        this.internalStep = step;
    }

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.