How to change Jquery UI Slider handle

Posted by Tom on Stack Overflow See other posts from Stack Overflow or by Tom
Published on 2009-07-30T15:18:51Z Indexed on 2010/06/08 2:42 UTC
Read the original article Hit count: 817

I want to modify the stock JQuery UI slider so that the handle has a arrow on it rather than being a square. i.e. I want to use a custom image as the handle.

There are a few tutorials that do it:

But I can't get it to work. The following code results in a stationary handle image:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;}   
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({handle: '#myhandle'});
  });
  </script>
</head>
<body>
<div id="slider"><div id="myhandle"></div></div>
</body>
</html>

It is as if JQuery doesn't pick up that I want to use the myhandle id for the handle. I'm wondering: Do I need a plugin for JQuery to recognise the handle option? (it is not documented in http://docs.jquery.com/UI/Slider). Or perhaps it only worked in an old version of JQuery?

Any ideas?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui