Uncaught TypeError: Object [object Object] has no method 'slider'

Hi,
I trying to use jquery slider to chose range of port numbers, I did this :

<label class="formLabel">Port</label>
            <div id="slider-range"></div>
            <input type="text" id="minvalue" property="criteriaPort" name="minvalue" /><br>
            <input type="text" id="maxvalue" property="valuePort" name="maxvalue" /><br>
.............


</html:form>
</div>

<script type="text/javascript" src="js/enhance.js"></script>
<script type="text/javascript">
    enhance({
        loadScripts: [
            'js/jquery.js',
            'js/jquery.ui.core.js',
            'js/jquery.ui.datepicker.js',
            'js/jquery.validate.js',
            'js/agentSearch.js',
            'js/loadhelp.js'
        ],
        loadStyles: [
            'css/jquery-ui.css'
        ],
        forcePassText: "",
        forceFailText: ""
    });
</script>

Code (markup):

and agentSearch.js :

$(document).ready(function() { 
$("#slider-range").slider({
        range: true,
        min: 1,
        max: 10,
        values: [0, 11],
        slide: function(event, ui) {
            $("#minvalue").val(ui.values[0]);
            $("#maxvalue").val(ui.values[1]);
       
        },
        create: function(event, ui) {
            $("#minvalue").val(1);
            $("#maxvalue").val(10);
        }
});

Code (markup):

I see only the two text fields but not the slider, please your help is appreciated.
Thanks

 

Seems to me you're just loading the ui.core, not the slider bit?

 

Add "jquery.ui.slider.js" to your enhance script

 enhance({
        loadScripts: [
            'js/jquery.js',
            'js/jquery.ui.core.js',
            'js/jquery.ui.datepicker.js',
            'js/jquery.validate.js',
            'js/agentSearch.js',
            'js/loadhelp.js',
            'jquery.ui.slider.js'
        ],
        loadStyles: [
            'css/jquery-ui.css'
        ],
        forcePassText: "",
        forceFailText: ""
    });

Code (markup):

 

is not slider a part of jquery-ui.core.js ?
if so where to download jquery.ui.slider.js ?
Thanks

 

see under widgets, this will generate a custom js file with only the components your using
http://jqueryui.com/download/

 

Thank you, I just downloaded a customized jquery-ui, it's working now.
I have another question please I want to add a checkbox that is not checked, so the slider is diabled, when checked the slider is enabled.
thanks, your help is appreciated.

 

Well you could it like this

$(function() {
    $( "#slider" ).slider();
    $( "#slider" ).slider('disable');
    $('#test').change(function() {
        var isChecked = $('#test').prop('checked');
        if(isChecked) {
            $( "#slider" ).slider('enable');
        }
        else {
            $( "#slider" ).slider('disable',false);
        }
    });
  });

Code (markup):

where #test is a checkbox, for example http://jsfiddle.net/TC6EV/1/

 

Thanks AbstractChaos, that what I was looking for, I appreciate your help.

 

My manager just wanted me to change the design for the slider, he wanted to have three options in the form :
1) none, only the checkbox is displayed and not checked.
2)when the checkbox is checked I have to have two options :
2-1) slider that has ranges.
2-2) slider that has a single value.

1) and 2-1) are done, how to add 2-2) to use one of the text input that is used in 2-1).

My code :

  <label class="formLabel">Port Ranges</label>
            <input type="checkbox" name="checkedRange" id="checkedRange"property="checkedRange" style="margin-bottom:8px"/>
            <div  id="DivRangeports" style="display:none">
            <div id="slider-range"></div>
            <label class="formLabel">Min port range</label>
            <input type="text" id="minvalue" property="minvaluePort" name="minvalue" />
            <label class="formLabel">Max port range</label>
            <input type="text" id="maxvalue" property="maxvaluePort" name="maxvalue" />
            </div>

Code (markup):

$(document).ready(function() {

// added this function for slider
    $("#slider-range").slider({
        range: true,
        min: 1,
        max: 65535,
        values: [0, 0],
        slide: function(event, ui) {
            $("#minvalue").val(ui.values[0]);
            $("#maxvalue").val(ui.values[1]);
         
        },
        create: function(event, ui) {
            $("#minvalue").val(0);
            $("#maxvalue").val(0);
        }
    });

  // end slider function
 
  //checkbox to show/hide range slider
     $('#checkedRange').live("click", function() {
    if (this.checked) {
        $('#DivRangeports').show();
    }
    else {
        $('#DivRangeports').hide();
    }
});
  //
});

Code (markup):

Thanks lot, your help is appreciated.

 

HI AbstractChaos,

I have a question please, is there any way to disable one of the two handles of the slider, let say I want to disable the max handle when a checkbox is ckecked.
Thanks.