How to prevent pageup/pagedown in Vuetify slider?

Question

I'm using Vuetify 2.6 and have a v-slider. When that slider is moved by the user it obviously gets focus.

PageUp and PageDown is used for other functions and I want them to continue doing that even though the user has just moved the slider. Currently they cause the slider to page up or down, when it has the focus, which I want to prevent.

Is there a way to prevent v-slider to act on PageUp/PageDown keypresses? Or any keypresses for that matter?

I have tried

        <v-slider
          @keypress.prevent
          grow
          :hide-details="true"
          v-model="bpm"
          :max="300"
        />

and some other variations of v-on.

Answer 1

Instead of adding prevent on v-slider, you could wrap the v-slider with a div and change the keydown event to capture mode (default is bubbling).

Template:

 <div @keydown.capture="onKeydown">
    <v-slider
      grow
      :hide-details="true"
      v-model="bpm"
      :max="300"
    />
</div>

JS

methods: {
    onKeydown(e) {
      e.stopPropagation(); // do not propagate the keydown event
    }
}