CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsslider
Manish J
Manish J

Reputation: 746

How to create multi range time slider in jQuery UI

I am using JQuery UI Time Slider.I want to get multiple Ranges with multiple Handles.
such like given below :

Start point 10:00 AM--Range---2:00 PM 4:00 PM---Range------8:00 PM 9:00 PM---Range---11:00 PM Endpoint

I have tried this 

$("#slider2").timeslider({

        sliderOptions: {
            ranges:  [false, true, false, true], 
            min: 300, 
            max: 3179, 
            values: [400, 800,1100,1600,2000,2500],
            step:5
        },

        errorMessage: '#max2',
        timeDisplay: '#time2',

        clickSubmit: function (e){
            var that = $(this).siblings('#slider2');

            $('#schedule2 tbody').append('<tr>' +
                '<td>' + that.attr('id') + '</td>' +
                '<td>' + that.timeslider('getTime', that.slider("values", 0)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 1)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 2)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 3)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 4)) + '</td>' + 
                '<td>' + that.timeslider('getTime', that.slider("values", 5)) + '</td>' + 
                '</tr>');
            e.preventDefault(); 
        }
    });

If anybody have a good example please share link with me to get these kind of output or please help me to modify this above code.

Thank you "Have a nice day ahead"

Upvotes: 2

Views: 3827

Answers (1)

Korthout
Korthout

Reputation: 441

I have been searching for a solution myself, but it is hard to find a (good) solution. Elessar seems a good option. It was given as an answer here: jquery-slider-plugin-that-supports-multiple-ranged-handles.

It's usage can be found on Elassar's GitHub page.

Upvotes: 2

Related Questions