bootstrap-slider tabindex issue

[netanonima]

I range sliders on a page and I can't use the tab to switch to next element using tabindex.

I have on my page (tabindex 1 and 2 are working so I didn't paste it) :

<div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Title1</label>
                            <input id="slider1" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" 
                            data-slider-value="0" name="rate1" tabindex="3"/>
                            <span id="slider1CurrentSliderValLabel">Valeur sélectionnée : +<b><span id="slider1SliderVal">0</span></b>%</span>     
                        </div>
                        <div class="form-group col-md-6">
                            <label>Title2</label>
                            <input id="slider2" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" 
                            data-slider-value="0" name="rate2" tabindex="4"/>
                            <span id="slider2CurrentSliderValLabel">Valeur sélectionnée : +<b><span id="slider2SliderVal">0</span></b>%</span>     
                        </div>
                    </div>

And on my js file :

$("#slider1").slider();
    $("#slider1").on("slide", function (slideEvt) {
        $("#slider1SliderVal").text(slideEvt.value);
    });
    $("#slider2").slider();
    $("#slider2").on("slide", function (slideEvt) {
        $("#slider2SliderVal").text(slideEvt.value);
    });