search

IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.55k stars 508 forks source link

Suggestion: controllable tab index for slider handles #548

Open besuhoff opened 6 years ago

besuhoff commented 6 years ago

As of 2.2.0, the single slider works pretty well with tab index, as tabindex="0" is being set to it's line bar which allows controlling single slider from keyboard almost in an expected way.

But for a double mode that provides problems, as only left handle can be controlled from keyboard (see https://github.com/IonDen/ion.rangeSlider/blob/2.2.0/js/ion.rangeSlider.js#L746)

What I suggest is to provide optional config parameters data-type="single" data-tabindex="1" data-type="double" data-from-tabindex="1" data-to-tabindex="2"

Or .ionRangeSlider({ type: "single", tabindex: 1 }) .ionRangeSlider({ type: "double", fromTabindex: 1, toTabindex: 2 })

So that the tabindex got applied directly to .irs-slider, .irs-slider.from and .irs-slider.to, and so that corresponding handle could be focused, and on focus it could be activated for keyboard control. That would also allow an extremely expected behavior when styling things up, such as .irs-slider:focus { outline: 2px solid red }

besuhoff commented 6 years ago

I've tried to play around with the source code but unfortunately haven't got a clear picture of an assumed solution for this