Vue-slider-component: On focus make dot active

[creativejeff]

Hi!

My challenge is:
When the dot has focus via keyboard tab - make the dot active so the user can start navigating the slider without having a mouse.

I guess my question becomes: is it possible to through my focus event listener make the dot active? I've tried simulate a click in my event listener without success.

This is how the code looks:

<div @focus="myClickEvent" tabindex="3" slot="dot" slot-scope="{ value }" class="vue-slider-dot-handle dot-outer">
         <span class="dot-inner" ref="myBtn">
                {{ value }}
            </span>
</div>

myClickEvent($event) {
  console.log('Dot is now in focus');
  const elem = this.$refs.myBtn
  elem.click() // Does not work. Can we call some other function to make the dot active?
}

[NightCatSama]

Try this

this.$refs.slider.focusSlider = 0
this.$refs.slider.focusFlag = true

[creativejeff]

Works like a charm, thank you!!

[3zzy]

@NightCatSama @creativejeff Where does this code go? There's absolutely no context.

[creativejeff]

Hey @3zzy , it goes to the function you've binded to the element. In my case it goes to my focus event conveniently called myClickEvent()

myClickEvent($event) {
  this.$refs.slider.focusSlider = 0
  this.$refs.slider.focusFlag = true
}

[NightCatSama]

@3zzy If you are using the v3.x version, you can use the focus method.

https://nightcatsama.github.io/vue-slider-component/#/api/methods?hash=focusindex

[3zzy]

@creativejeff @NightCatSama Great, thanks, that helped! Just wondering how to make it work for a range slider (two handles)?

[NightCatSama]

@3zzy The first parameter of focus is the index of the slider.