Rangeslider.js | Uncaught TypeError: Cannot read property '0' of undefined

Asked 15/6, 2016 at 2:49 Answered 2/4, 2021 at 4:4

Solved javascript jquery html input rangeslider

I'm trying to use rangeslider.js

This is my HTML includes:

<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="rangeslider.js-2.1.1/rangeslider.min.js"></script>

This is my HTML:

<input type="range" min="0.0" max="1.0" step="0.05" value="0.8" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">

<script>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider();

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider('destroy');

    // Update all rangeslider instances for all
    // e.g. $('input[type="range"]') elements.
    // Usefull if you changed some attributes e.g. `min` or `max` etc.
    $('input[type="range"]').rangeslider('update', true);
</script>

I am getting this error:

Uncaught TypeError: Cannot read property '0' of undefined.

These are the lines that appear to be being referencing to in rangeslider.min.js:

line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)),

line 272: "string" == typeof b && e[b].apply(e, c)

I am unsure as to what type error I am causing?

Ulibarri answered 15/6, 2016 at 2:49 Comment(5)

Any luck with that? I am getting the exact same error – Ringed 21/6, 2016 at 9:27

same problem here, It seems to be the update function – Edmead 29/6, 2016 at 21:1

I had the same problem with no solution – Bilateral 20/8, 2016 at 23:37

after calling destroy, re initialize then update, destroy removes your range slider so you should not be able to update after that – Legitimatize 21/9, 2017 at 11:8

try $('input[type="range"]').rangeSlider().rangeslider('update', true); – Legitimatize 21/9, 2017 at 11:11

You need to include the css file of rangeslider.js, and you shouldn't destroy the rangeslider.

For a minimun example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css">
</head>
<body>
    <input type="range" min="10" max="1000" step="10" value="300">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
    <script>
       $('input[type="range"]').rangeslider({polyfill: false});
    </script>
</body>
</html>

The example above is based on the code in rangeslider.js.

I think the Usage section in rangeslider.js is just a script showcase. So if we directly use those scripts, the following errors occurs:

Error message in chrome:

Uncaught TypeError: Cannot read property '0' of undefined

Error message in Firefox:

TypeError: this.$handle is undefined

Amasa answered 26/5, 2018 at 18:44 Comment(0)

This happened to me. The script to initialize the range slider input is being initialized before the DOM renders. Try writing your script tag like this

<script>
$(function() {
    // Code here
});
</script>

Seclusive answered 2/4, 2021 at 4:4 Comment(0)

Recommended topics

Hot tags