Question

I’m trying to use this tutorial to create a jQuery Slider with a custom handle:

http://papermashup.com/jquery-ui-slider/

On their demo page it works, but when I do the same thing it doesn’t display the custom handle image. It displays everything else correctly. Here’s the page I am using (you can see that the images exist on the server and should show):

http://jovansfreelance.com/stripe_pay/

This is the image that should be showing as the slider handle:

http://jovansfreelance.com/stripe_pay/images/slider-button.png

What am I doing wrong?

Answer 1

You forgot to wrap your code in a document.ready() call. The way your code is now, it is trying to execute before the elements exist in the page.

Try:

$(document).ready(function(){
    $( ".slider" ).slider({
           animate: true,
               range: "min",
               value: 50,
               min: 10,
               max: 100,
               step: 10,

               //this gets a live reading of the value and prints it on the page
               slide: function( event, ui ) {
                   $( "#slider-result" ).html( ui.value );
               },

               //this updates the hidden form field so we can submit the data using a form
               change: function(event, ui) {
               $('#hidden').attr('value', ui.value);
               }
    });
});