Range Slider: Som event missing to detect when knob moved?

is there a dom event for range slider to detect when the knob has been dropped or released?

in the moment I only see this: range:change

the problem with this event it is that I need to filter a Json array by price definitions and when I move the knob the function run immediately and I need this to happen only when the user dropped the knob in a particular value and not every time he is moving it…

any solution or dom event for this?

I have found this in f7 js but it runs for all touchend events on screen not for range slider only …

app.on(‘touchend:passive’, handleEnd);

the ideal thing will be something like:

app.range.on('touchend:passive', handleEnd);

and the handleEnd function to run like:

function handleEnd() {

  console.log('dragged and dropped');


I think the missing events are listed here:


I think the f7 range slider should have more events like in this nouislider above to be usable for more implementations other than just a form input… ‘start’ and ‘end’ events, that fire when a drag is started or ended will be useful with range slider to be included like in this nouislider…

any ideas to make this work only for the range slider?

1 Like

Can you use the “blur” event will it help you?

    alert('Tirou o foco do elemento');

.blur() - Trigger “blur” event
.blur(handler) - Add “blur” event handler

Sorry for my bad english.

More infos: https://framework7.io/docs/dom7.html

1 Like

I will try to use blur and see if this helps!! thank you so much not problem with your English is perfect :slight_smile:

1 Like

If I can help,il be happy.

I will add range:changed event for this case. At the moment you can use JavaScript debounce pattern to delay its execution https://www.google.com/search?q=javascript+debounce+pattern&oq=javascript+debounce+pa&aqs=chrome.1.69i57j0.7830j0j1&sourceid=chrome&ie=UTF-8

1 Like

P.S. please keep topic title clean

1 Like

thank a lot for considering!

1 Like