Suggestion: Tab index

[JosefWN]

It would be nice if the control supported tab index. I tried setting it on the text input but since it's hidden it doesn't work. This is just a minor detail though.

[IonDen]

Good idea. I will check this.

[leeish]

Any chance you could share how I could achieve this with JQuery. I've captured the event when someone tabs to the hidden range input field. But I've tried manually focusing on the .irs-slider, triggering a click on the .irs-slider and other elements and nothing seems to grab the focus and activate the keyboard. What element or event could I trigger to simulate someone activating the keyboard. P.S. love the tool, works great.

[IonDen]

Hi, original input has class irs-hidden-input.
BTW, you may add it you own class, while creating you html-page.

[vesrah]

Lee, I achieved adding tab indexes with the following jQuery:
$('.irs-slider.from, .irs-slider.to').each(function() { $(this).attr('tabindex', '0'); });
However, this doesn't actually allow the controls to be manipulated. They must first be clicked before they become active. This is unfortunate.

[ukalpa]

Hi there,

I figured out a solution as below makes keyboard operation active straightway when the input is focused by pressing tab:

1. Set tabindex for "span.irs-line" and set "keyboard" as true

    $("input[name=test]").ionRangeSlider({
        type:"single",
        keyboard: true,
        grid:true
    }).parent().find("span.irs-line").attr("tabindex", "1");`
   

2. Add the below section in the function "moveByKey", please add in below of "var p = this.coords.p_pointer;"

    moveByKey: function (right) {
        var p = this.coords.p_pointer;
   
        // Start adding extra code for capturing the keyword without mouse clicking.
        if (!this.target)   {
            p = this.coords.p_from_fake;
            this.target = this.options.type;
        }
        // End
   
        ...
    }
   

[dmitru]

It's a shame this component doesn't support keyboard out of the box. Otherwise - great work!

[IonDen]

@Puffton, @leeish, @dmitru, @ukalpa, @vesrah
Implemented in 2.2.0

[besuhoff]

@IonDen hi, this is cool but doesn't solve tabIndex issue for type="double", so would be nice to actually have tabIndex on each .irs-slider, probably overridable via config

[IonDen]

@besuhoff, good point. Could you create another ticket with more detailed suggestion?