I got this error for my code

TypeError: $.ui is undefined TypeError: $(...).slider is not a function

Below is my HTML implementation

At

i am using

<script type="text/javascript" src="js/jquery.js"></script>

at Body

I am using

<div id="scale-slider"></div>

<script type="text/javascript" src="js/slider-pips.js"></script>
        <script type="text/javascript">
$("#scale-slider")
    .slider({
        max: 50,
        min: -50,
        values: [-20, 20],
        range: true
    })
    .slider("pips", {
        rest: "label"
    });
        </script>

I am trying to implement jquery slider pips but it give me 2 errors as defined above.

Uncaught TypeError: Cannot read property 'slider' of undefined

I got this error for my code

TypeError: $.ui is undefined TypeError: $(...).slider is not a function

Below is my HTML implementation

At

i am using

<script type="text/javascript" src="js/jquery.js"></script>

at Body

I am using

<div id="scale-slider"></div>

<script type="text/javascript" src="js/slider-pips.js"></script>
        <script type="text/javascript">
$("#scale-slider")
    .slider({
        max: 50,
        min: -50,
        values: [-20, 20],
        range: true
    })
    .slider("pips", {
        rest: "label"
    });
        </script>

I am trying to implement jquery slider pips but it give me 2 errors as defined above.

Uncaught TypeError: Cannot read property 'slider' of undefined

• javascript
• jquery

Share Improve this question Follow asked Feb 13, 2016 at 1:39 Chen Xiao XiongChen Xiao Xiong 2511 silver badge88 bronze badges 2

• Try wrapping the script in a $(document).ready(function(){ //code goes here }); function. This will delay the start of the script until after the DOM has loaded. – Matt Greenberg Commented Feb 13, 2016 at 1:44
• Did you include JqueryUI <script src="https://code.jquery./ui/1.11.1/jquery-ui.js"></script> – The Process Commented Feb 13, 2016 at 1:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

From what I read from here :http://simeydotme.github.io/jQuery-ui-Slider-Pips/ You have to call both jquery AND jquery-ui (and the theme...)

(at least try with these links to see if it's "your jquery" who's the problem..)

<!-- include the jQuery and jQuery UI scripts -->
<script src="https://code.jquery./jquery-2.1.1.js"></script>
<script src="https://code.jquery./ui/1.11.1/jquery-ui.js"></script>

<!-- plus a jQuery UI theme, here I use "flick" -->
<link rel="stylesheet" href="https://code.jquery./ui/1.10.4/themes/flick/jquery-ui.css">

then you can try

<script type="text/javascript">
$("#scale-slider")
    .slider({
        max: 50,
        min: -50,
        values: [-20, 20],
        range: true
    })
   .slider("pips", {
        rest: "label"
    });
</script>

Hope this will help :)

I think you didn't included JqueryUI

<script src="https://code.jquery./ui/1.11.1/jquery-ui.js"></script>

Seems that jQueryUI is missing. Place

<script src="https://code.jquery./jquery-2.1.1.js"></script>
<script src="https://code.jquery./ui/1.11.1/jquery-ui.js"></script>

before any other Javascript. Make sure, DOM is loaded and use $(document).ready(function(){...})

It is requiring the right URIs. Note the five on the left.

https://jsfiddle/otdvqsop/1/

Since I have to include some code, here is the nice CSS from the JSFiddle below:

.ui-state-focus, 
.ui-widget-content .ui-state-focus, 
.ui-widget-header .ui-state-focus,
.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover,
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
  background: #2b2b2b;
  border-color: transparent;
}

https://jsfiddle/simeydotme/Lh6pygef/