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>

You need to include the relevant libraries (in the pen, click on Settings > JavaScript). Also, might as well include the CSS ones too... — Nick
– Nick, Commented Sep 9, 2017 at 2:30
I have included the relevant files, as I said, and they are being loaded. Can't see any JS errors either. — cata
– cata, Commented Sep 9, 2017 at 12:18

score 2 · Accepted Answer · 2017-09-09 02:39:58Z

2

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>

edited Sep 9, 2017 at 2:39

answered Sep 9, 2017 at 2:31

user2652134

Sign up to request clarification or add additional context in comments.

4 Comments

cata Over a year ago

I did, as stated above... that's not it

user2652134 Over a year ago

@cata That's all anyone can tell with the information provided. Perhaps you're doing something else also on the same page that you've not mentioned.

cata Over a year ago

I had included the libraries, but the function call (the first line in the answer) was missing. It was missing in the original snippet, too. I thought before the code was looking strange without a function call but I don't know enough JS syntax yet. Problem solved, thank you! :)

cata Over a year ago

I guess most of the problems I have will be syntax problems, I just don't know where to look for them... This was the biggest one for now, I will try to figure things out from here

Collectives™ on Stack Overflow

Can't seem to handle Javascript

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related