CODEWITHSUNDEEP
jqueryjquery-ui
connor moore
connor moore

Reputation: 611

Adding method/function to jquery ui slider

I am trying to add a function/method to jquery ui slider that I can play with adding another handle to my slider with. I have my slider like this right now:

var initialValues = [180, 435, 1080, 1320]; // this gives me 4 slider handles
updateValue = function (ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);

if (hours.length == 1) hours = '0' + hours;
if (minutes.length == 1) minutes = '0' + minutes;
if (minutes == 0) minutes = '00';
if (hours >= 12) {
    if (hours == 12) {
        hours = hours;
        minutes = minutes + " PM";
    } else {
        hours = hours - 12;
        minutes = minutes + " PM";
    }
} else {
    hours = hours;
    minutes = minutes + " AM";
}
if (hours == 0) {
    hours = 12;
    minutes = minutes;
}
$(ui.handle).attr('data-value', hours + ':' + minutes);

};

$(".pct-slider").slider({
min: 0,
max: 1440,
step: 15,
range: false,
values: initialValues,
create: function (event, ui) {
    $.each( initialValues, function(i, v){
        updateValue({
            value: v,
            handle: $('.ui-slider-handle').eq(i) 
        });
    });
},
slide: function (event, ui) {
    var handleIndex = $('a', event.target).index(ui.handle),
        curr = ui.values[handleIndex],
        next = ui.values[handleIndex + 1] - 25,
        prev = ui.values[handleIndex - 1] + 25;

    if (curr > next || curr < prev) {
        return false;
    }

    updateValue(ui);
    positionSelects();
},
addValue: function( val ) {
        //Add your code here for testing that the value is not in the list
        this.options.values.push(val);
        this._refresh();
    },
removeValue: function( ) {
    this.options.values.pop( );
    this._refresh();
}

});

when I call $( ".pct-slider" ).slider("addHandle"), I get a "no such method 'addHandle' for slider widget instance". Whats the issue and what do I need to do so I can start messing with the functionality of this.

EDIT I now try to call $( ".pct-slider" ).slider("addValue(1400)") and i get the no such method error. I am using jquery ui 1.10.4 also.

Upvotes: 1

Views: 520

Answers (1)

Xogle
Xogle

Reputation: 363

Put this before you call your slider.

(function ($) {
$.widget('my-namespace.customSlider', $.ui.slider, {
    addValue: function( val ) {
        //Add your code here for testing that the value is not in the list
        this.options.values.push(val);
        this._refresh();
    },
    removeValue: function( ) {
        this.options.values.pop( );
        this._refresh();
    }
});
})(jQuery);

Then call your slider like this,

$("#slider").customSlider({/* options */});

Finally change the slider values like this,

$("#slider").customSlider('addValue', 5);

You are basically defining your own jquery method... look at this jfiddle to see how it works.

http://jsfiddle.net/ac2A3/5/

Edit Solution here... jQuery UI - Slider - How to add values

That is true. There is no method called "addHandle", you can see the list of options for jQueryUI slider, here...

http://api.jqueryui.com/slider/

Upvotes: 1

Related Questions