CODEWITHSUNDEEP
javascriptjqueryjquery-ui
LiamRyan
LiamRyan

Reputation: 1908

JQuery UI Slider Uncaught TypeError: Cannot read property 'addClass' of undefined

I've checked all of the questions on SO and I can't seem to find the answer. If I place integers directly into the fields then this works but I want to set the parameters dynamically when I set up my script

I'm running JQuery 1.11.1, JQuery UI stable (1.11.0) and touchpunch. I've debugged and the variables are all present and initialised when this is invoked. I've also tried wrapping in self-executing functions with the same results.

(The slide function can be disregarded)

This throws the exception

EDIT I've just noticed that if I click on the slider the exception is thrown but if I then press the right arrow key no exception is thrown and the amount is populated with the value property. I've pasted console output at the end of the question.

$("#slider").slider({
            value: parseInt(window.settings.principal.minimum),
            min: parseInt(window.settings.principal.minimum),
            max: parseInt(window.settings.principal.maximum),
            step: parseInt(window.settings.principal.increment),
            slide: function(event, ui) {
                $( "#amount" ).val( "$" + $( "#slider").slider( "value"));
            }
        });

However this WILL work 

$("#slider").slider({
            value: 500,
            min: 500,
            max: 10000,
            step: 500,
            slide: function(event, ui) {
                $( "#amount" ).val( "$" + $( "#slider").slider( "value"));
            }
        });

Console Output

jQuery("#slider").slider("value"); 
5000
jQuery("#slider").slider("min"); 
Error: no such method 'min' for slider widget instance
jQuery("#slider").slider("minimum"); 
Error: no such method 'minimum' for slider widget instance
jQuery("#slider").slider("max"); 
Error: no such method 'max' for slider widget instance
jQuery("#slider").slider("interval"); 
Error: no such method 'interval' for slider widget instance
jQuery("#slider").slider("step"); 
Error: no such method 'step' for slider widget instance
jQuery("#slider").slider("values"); 
[]

Upvotes: 6

Views: 16864

Answers (3)

Satyanarayana Dhangeti
Satyanarayana Dhangeti

Reputation: 11

Please check minimum and maximum values, min value should be less than max value.

Please check below example for reference.

$( ".slider1"+blockid ).slider({
    range: "min",
    value:0,
    min: 100,
    max: 10000,
    step : 10000,
    animate:true,
    slide: function( event, ui ) {
        console.log(ui.value);
    },
    create: function(event,ui){
    }
});

Upvotes: 0

costin.cosmeanu
costin.cosmeanu

Reputation: 1

I've had the same problem. Just on a trial n error base, i've discovered that the problem lies within the parseInt() function. I've removed the function and just used the raw data :

$("#slider").slider({
    value: window.settings.principal.minimum,
    min: window.settings.principal.minimum,
    max: window.settings.principal.maximum,
    step: window.settings.principal.increment
});

It seems we're copying an old piece of snippet for the slider. I have no ideea what is wrong with parseInt() in this setup, as i'm not that technical, but i hope this helps others.

Upvotes: 0

Chris
Chris

Reputation: 1426

Give your variables (window.settings.principal.*) another look. I just copied your source code, replaced them with my own, and it worked, so your code seems to be fine. Make sure that they're not only valid numbers, but that they make sense in context.

Upvotes: 3

Related Questions