Can't seem to handle Javascript

Question

I have some trouble getting JS to work and I guess I'm failing at something very basic. I need to ge a job done with JS, but even copy&pasitng code snippets doesn't work, or just works sometimes (seems pretty random to me).

For example, I need to get something similar to https://codepen.io/andreruffert/pen/vOVygB . Now, if I use rangeslider in its simplest form, it kind of works (sometimes), but if I copy & paste the code from the pen (the JS goes to the head of my HTML), it just breaks. Any hints at what I might be doing wrong? I know i unclude the right JS files cause things sometimes do work, it's just been pretty random with jquery UI and rangelsider, for all I can tell from my noob perspective...

here's my code, for example- It's copied 1:1 from the link above but doesn't work on my website:

<head>   
    <script>
        var $rangeslider = $('#js-amount-range');
        var $amount = $('#js-amount-input');
        $rangeslider.rangeslider({
            polyfill: false
        }).on('input', function () {
            $amount[0].value = this.value;
        });
        $amount.on('input', function () {
            $rangeslider.val(this.value).change();
        });
    </script>
</head>
<body>
    <h1>Programmatic value changes</h1>
    <br>
    <br>
    <input type="range" id="js-amount-range" value="0" min="0" max="100">
    <br>
    <br>
    <input type="number" id="js-amount-input" value="0" min="0" max="100"></input>
    <span>.00 $</span>
</body>

Answer 1

You need to import the js libraries to your code.

 $(document).ready(function() { var $rangeslider = $('#js-amount-range'); var $amount = $('#js-amount-input'); $rangeslider .rangeslider({ polyfill: false }) .on('input', function() { $amount[0].value = this.value; }); $amount.on('input', function() { $rangeslider.val(this.value).change(); }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.1/rangeslider.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script> <h1>Programmatic value changes</h1> <br> <br> <input type="range" id="js-amount-range" value="0" min="0" max="100"> <br> <br> <input type="number" id="js-amount-input" value="0" min="0" max="100"></input> <span>.00 $</span>

Can't seem to handle Javascript

Question

1 answers

solution1
2 ACCPTED 2017-09-09 02:31:33

Can't seem to handle Javascript

Question

1 answers

solution1 2 ACCPTED 2017-09-09 02:31:33

solution1
2 ACCPTED 2017-09-09 02:31:33