How to select reverse range in Bootstrap range slider?

Question

I have use Bootstrap range slider i have 2 questions where i am totally stuck.

my question is how can i select reverse range like i have a slider with values 1 to 10 then i have to select 9 to 3 how can i do that?

Here, i have a slider with month range i want to select like oct - feb how can i do that???

And the another question is how can i add labels of my two handles?

Here is my html code,

<input id="ex1" type="hidden" data-clear-delay="true" data-provide="slider" data-slider-selection="none" data-slider-value="[0,100]" data-slider-ticks="[1,2,3,4,5,6,7,8,9,10,11,12]" data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]' data-slider-ticks-positions="[0, 9.09, 18.18, 27.27, 36.36, 45.45, 54.54, 63.63, 72.72, 81.81, 90.90, 100]" data-val="true" name="prefered_travel_period" value="" />

and the javascript is,

jQuery(function($) {
  $('#ex1').slider({
    formatter: function(value) {
        return ;
    },
    id: "slider12c",
    labelledby:["min","max"]
 });
});

Please help me out of this, thank you in advance.

Answer 1

In order to support selecting month ranges across new year, you could simply make a slider across two generic years, instead of just covering the range of months only over one generic year.

E.g.:

<input id="ex1" type="hidden" data-clear-delay="true" data-provide="slider" data-slider-selection="none" data-slider-value="[0,100]" data-slider-ticks="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan2","Feb2","Mar2","Apr2","May2","Jun2","Jul2","Aug2","Sep2","Oct2","Nov2","Dec2"]' data-slider-ticks-positions="[0, 4.34, 8.69, 13.04, 17.39, 21.73, 26.08, 30.43, 34.78, 39.13, 43.47, 47.82, 52.17, 56.52, 60.86, 65.21, 69.56, 73.91, 78.26, 82.60, 86.95, 91.30, 95.65, 100]" data-val="true" name="prefered_travel_period" value="" />

It is always a point of opinion what is "intuitive", but I think this is better than any inverse concept, e.g. like "please select the months you do NOT want to use".

Answer 2

You have: data-slider-ticks and data-slider-ticks-labels

If you want to only display Jan - Jun. You'd have to change it to this:

• data-slider-ticks="[1,2,3,4,5,6]"

• data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun"]'