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
– Xogle, Commented Jun 4, 2015 at 15:40

Community · Accepted Answer · 2017-05-23 10:26:52Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 4, 2015 at 15:20

Xogle

3633 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

connor moore Over a year ago

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

Xogle Over a year ago

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.

connor moore Over a year ago

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 Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

Adding method/function to jquery ui slider

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related