Adding method/function to jquery ui slider

Question

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.

You have to implement addValue... its a custom method, just like you were trying to do. — Xogle, Jun 04 '15 at 15:40

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

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/

edited May 23 '17 at 10:26

Community

1
1

answered Jun 04 '15 at 15:20

Xogle

363
3
16

Its not a built in option. I want to add a function. How do I do this? -- what Im trying to do is eventually add/remove handles to this slider – connor moore Jun 04 '15 at 15:21
It depends what you want to happen and when... there is an option for when it is created, when it changes, etc... if you're looking to add multiple handles or something of the sort, you should make your own method and call multiple instances of your slider... not sure what you're trying to achieve. – Xogle Jun 04 '15 at 15:22
I dont want to create another slider. I want to add a slinder handle. for example I have 4 handles on my slider from the code that says "[180, 435, 1080, 1320]". I want to be able to add another slider. – connor moore Jun 04 '15 at 15:28
Nope, this seems to move sliders around not add a new 1. essentially I need to be able to update/add onto my initialValues array, then redraw the slider. – connor moore Jun 04 '15 at 15:34
The only problem I have now has to do with the updateValues() function. It is called on create with the values. I am adding values to the values of the slider. I know I can destroy the slider, but how do I redraw it? I cant just call $(".pct-slider").customSlider('create') on it. – connor moore Jun 04 '15 at 15:52
Just add a refresh. $( ".selector" ).slider( "value", oneOfYourValues); – Xogle Jun 04 '15 at 15:58
$(".pct-slider").customSlider('addValue', 50) then $( ".pct-slider" ).customSlider( "value", 50); doesn't refresh/redraw the slider – connor moore Jun 04 '15 at 16:00
Not sure what the issue is, follow the JSFiddle I sent. It updates and refreshes. – Xogle Jun 04 '15 at 16:02

Adding method/function to jquery ui slider

1 Answers1