0

I have a below button in LWC

HTML:

    <lightning-button-icon icon-name="utility:chevronright" 
onmousedown={slideRight} variant="bare">

JS:

slideRight() {
        this.template.querySelector('[data-id="container"]').scrollLeft += 100;
    }

It's purpose is to slide the page horizontally and it is working as expected but the problem is it works only on single click doesn't keep sliding on press and hold I have tried onmousedown, onmouseup but still no luck, could someone please suggest any work around for the same

2

onmousedown and onmouseup only trigger when a button is pressed or released, respectively. Unlike some keyboard events, they do not repeat periodically. It is therefore up to you to determine when/how to repeat. Here is a sample playground for you to look at. The code for this is below.


<template>
    <lightning-button label="Increase Counter" onmousedown={increaseCounter} onmouseup={stopCounting}></lightning-button>
    <hr></hr>
    <input readonly value={counter}></input>

</template>

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track counter = 0;
    timerId;
    increaseCounter() {
        this.counter++;
        this.timerId = setTimeout(this.increaseCounter.bind(this), 100);
    }
    stopCounting() {
        clearTimeout(this.timerId);
    }
}
| improve this answer | |
  • This is good stuff, I was able to break it fairly easily by holding down the click, moving my mouse out of the button and letting go. After that it didn't matter how many times I clicked on the button, the counter never stopped. I don't think it necessarily takes away from your answer though, more that it shows the limitations of the pattern. – gNerb Dec 2 '19 at 22:41
  • 1
    @gNerb It's not a "fully functional" demo, you'd also want to track onmouseover and onmouseout and figure out if the mouse was pressed or not using the MouseEvent button attributes. I wasn't going for complicated, I was going for minimalistic. – sfdcfox Dec 3 '19 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.