Rangeslider.js

Hi,

I’m trying to add this Rangslider.js https://andreruffert.github.io/rangeslider.js/ to my WordPress site, but Im having problems. Im new at this so I apologize for the dumb questions and I need start from scratch.

I downloaded the zip file from his site. I created a folder on my server under wp-content called rangeslider and uploaded the files.

Now my code copied directly from here: http://codepen.io/andreruffert/pen/vOVygB. Im tryng to recreate the exact slider featured in the link.

HTML:

<input type="range" id="js-amount-range" value="0" min="0" max="100">
<input type="number" id="js-amount-input" value="0" min="0" max="100"></input>

JS:

<script src="rangeslider.min.js"></script>

<script>
$('input[type="range"]').rangeslider({

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>

All that shows up on my site is the HTML Range input and the input variable box. The slider doesn’t change the value in the input box. Im not sure what Im doing wrong. Im not even sure im pulling the files from my server correctly. Any help would be appreciated.

<script src="rangeslider.min.js"></script>

above will tend to be declared in the html head and make sure it’s directory is correct…
what dir is your html in?

I put that script in the footer of my theme settings.

HTML is in the wp-content directory I’m guessing. That is where my theme resides.

if js is in same folder as html dir should be ok…
add below above the rangeslider.min.js

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

if no luck press f12 in browser…look at console tab and tell us the error you get, if any.

I have the current JQuery library already loaded. Th JS i am trying to load is the cusom code from the developer.

There’s a couple of errors in your html and js:
Inputs don’t have a closing tag so you can remove </input>

Looks like you’re initializing the rangslider twice, once here

$('input[type="range"]').rangeslider

and the other

$rangeslider.rangeslider

These are both attempts at initializing the same thing, I think this is what you’re after.

$(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();
  });

});

The $(function() { }) block around it runs when all of the HTML and assets have been loaded.

First of all thank you for taking the time to help me. I removed the closing input tag. I also put in your JS code suggestion, but it didn’t work. Not sure if I am placing the code incorrectly. I have to call the files from my server I downloaded from the authors site.

Do I place the script like this:

<script src="http://modovis.com/wp-content/rangeslider/rangeslider.min.js"></script>
<script>
function....
</script>

or this:

<script src="http://modovis.com/wp-content/rangeslider/rangeslider.min.js">
function....
</script>

I am trying to replicate this codepen: http://codepen.io/andreruffert/pen/vOVygB

at the top of your html in the head…add

<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://modovis.com/wp-content/rangeslider/rangeslider.min.js"></script>
</head

<body>
html here....



<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>


</body>
</html>

Thank you so much for the idea. I did exactly what you demonstrated, but all that shows up is the base HTML5 sldier and the base input box. The JQuery Script froze up my theme builder because it is already loaded so I removed it from the head but it didn’t make a difference.

Here is what I put in the HEAD: http://snag.gy/BBsto.jpg

Here is the Body/Footer: http://snag.gy/dJYkN.jpg

Here is the result: http://snag.gy/WElsd.jpg
(Under the LOST TIME is the slider and input)

Including JS files into WordPress could be sometimes tricky a bit.

First off, WordPress use no-conflict jQuery - what’s that mean ? If you are using $ it won’t work, so you have to use jQuery instead.

I you want to use $ the you can send it as argument via function like this:

jQuery(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();
});

});

Including JS files is again little bit different.You should include files using wp_enqueue_script() usually into functions.php file - also if script require jQuery you can use it as dependency, it’s built-in in WP

wp_enqueue_script('accordion_result', get_stylesheet_directory_uri() . '/js/filename.js', array('jquery'), true);

About loading CSS - you are using wp_enqueue_style();

The en queue makes sense. I didn’t do that. Let me see if I can get that to work. If I do i will make the code adjustment you proposed. Thank you!!!

So I tried to enqueue:

<?php

add_action(‘wp_enqueue_scripts’, ‘themify_add_scripts’);

function themify_add_scripts(){
wp_enqueue_script( “rangeslider.min.js”, get_stylesheet_directory_uri() . “/rangeslider.min.js”, array('jquery'), true);
wp_enqueue_style( ‘rangeslider’, get_template_directory_uri() . “/rangeslider.css”, array('jquery'), true);
}

?>


Still wont work. I think its time to throw the towel in on this one, I have spent an embarrassing amount of time trying to get this slider in my site haha.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.