CODEWITHSUNDEEP
javascriptjquery
Chen Xiao Xiong
Chen Xiao Xiong

Reputation: 25

Slider - Cannot read property 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

Upvotes: 0

Views: 8685

Answers (4)

Jeff Diederiks
Jeff Diederiks

Reputation: 1380

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

https://jsfiddle.net/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.net/simeydotme/Lh6pygef/

Upvotes: 0

manuxi
manuxi

Reputation: 352

Seems that jQueryUI is missing. Place

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

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

Upvotes: 0

Jicao
Jicao

Reputation: 96

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.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<!-- plus a jQuery UI theme, here I use "flick" -->
<link rel="stylesheet" href="https://code.jquery.com/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 :)

Upvotes: 2

solimanware
solimanware

Reputation: 3051

I think you didn't included JqueryUI 

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

Upvotes: 1

Related Questions