How to get slider min, max value from variable.

Question

How to get min, max slider value from variable.

When i try to slide, the slider is set to maximum and stops working.

If i put in min and max in numbers instead it work just fine.

Here is a fiddle showing the issue:

<INPUT TYPE="text" CLASS="slidervalue">
<DIV CLASS="slider"></DIV>

<INPUT CLASS="getmin" TYPE="text" VALUE="1">
<INPUT CLASS="getmax" TYPE="text" VALUE="10"> 


             var getmin = $('.getmin').val();
             var getmax = $('.getmax').val();

           $(".slider").slider({

                    range: "max",
                    min: getmin,
                    max: getmax,
                    value: 2,
                    slide: function( event, ui ) {
                        $( ".slidervalue" ).val( ui.value );
                    }       

            });

http://jsfiddle.net/gk3dG/1/

Answer 1

The jQueryUI slider expects int values, not string values. val() returns strings.

If you do this it fixes your issues...

var getmin = parseInt($('.getmin').val(), 10);
var getmax = parseInt($('.getmax').val(), 10);

See updated js fiddle...

You'll also have to handle NaN values, so you could also do this...

var getmin = parseInt($('.getmin').val(), 10);
var getmax = parseInt($('.getmax').val(), 10);

if (isNaN(getmin)) getmin = 1;
if (isNaN(getmax)) getmax = 10;

(assuming 1 & 10 are your default values).