» Adding a slider into WordPress

Adding a slider into WordPress

June 1, 2012 by Chris Johnson. Filed under keystrokes, public.

How can I get a slider in HTML? Actually, how can I get a slider in WordPress, which is slightly harder? jQuery UI provides a slider, but the jQuery that ships with WordPress was not appearing for me. I tried using the jQuery provided by Google’s CDN instead:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery.ui.all.css">
<?php
wp_deregister_script('jquery');
wp_register_script('jquery', "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js", false);
wp_enqueue_script('jquery');
wp_register_script('jqueryui', "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js", false);
wp_enqueue_script('jqueryui');
?>

There are probably later versions I could be grabbing.

Then I embedded a Javascript file into my post which created a slider div:

jQuery(function() {
  jQuery("#slider").slider({
      value: 100,
      min: 0,
      max: 500,
      step: 50,
      slide: function(event, ui) {
        // insert event-handling code here
      }
    });
});

// Add a div which will hold the slider.
document.write('<div id="slider"></div>');

This file produces the following slider:

And I’m satisfied.