JQuery UI Slider Uncaught TypeError：无法读取未定义的属性“addClass”

Question

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"); 
[]

Answer 1

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.

Answer 2

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.

Answer 3

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){
    }
});