Adding delay to save() when using onChange with a slider

Ask the community
,
1

Hey,

When a user inputs using a slider, I want to auto save to the collection without a button.

The code I’m using (below) does this, however it saves at the first point the slider reaches instead of where it finishes. Eg The slider has two steps 0 - 50 - 100, when sliding to 100 it will stop at 50 and save, then the user needs to go back and slide again from 50 - 100. (hope that makes sense).

It’s almost as if I need to user an afterChange event instead of an onChange or add a delay into the code … any ideas folks?

export function slider21_change(event) {
$w( ‘#dataset3’ ).setFieldValue( “boil” ,$w( ‘#slider21’ ).value);

$w( ‘#dataset3’ ).save()
.then((item) => {
console.log( “data was saved.” )
;
})
. catch ((err) => {
let errMsg = err;

});

}

2

You could put it in the onBlur event instead so if fires when the element loses focus.

3

Hey Anthony,

Thanks for the reply …

Never used an onBlur before, didn’t know what it did!! Just tried it but don’t think it will work. On a computer you have to click elsewhere before it works (which won’t work for my site) and it doesn’t seem to work at all on mobile.

Any other ideas?

4

Other approaches, like putting the slider in a transparent box and use the box onMouseOut event, work better on desktop, but are useless on mobile. You may have to resort to the dreaded button!

5

Noooooooo!! Not the dreaded button!!!

Thanks anyway for your help