ansaurus

Question

Answer 1

+4 A:

This has been answered before:

http://stackoverflow.com/questions/1170596/changing-slider-handle-image

karim79 2009-07-30 15:24:19

Oh yes, Thanks, that is helpful. But this question is a tiny bit different. Rather than altering the CSS ui-slider-handle class, I wanted to define my own class to make it easier to have many different sliders on the same page.

Tom 2009-07-30 15:34:33

Answer 2

+8 A:

The CSS class that can be changed to add a image to the JQuery slider handle is called ".ui-slider-horizontal .ui-slider-handle".

The following code shows a demo:

<!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"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"&gt;&lt;/script&gt;
  <style type="text/css">
  .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div id="slider"></div>
</body>
</html>

I think registering a handle option was the old way of doing it and no longer supported in JQuery-ui 1.7.2?

Tom 2009-07-30 16:05:12

wow.. i was also facing same problem and that got resolved from your solution.. thanks buddy

Rajesh Rolen- DotNet Developer 2010-04-27 05:12:53

Answer 3

+1 A:

you also should set the border:none to that css class

Xhanch Studio 2010-06-08 02:36:28

Answer 4

+1 A:

.ui-slider .ui-slider-handle{
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -10px;
    border-style:none; 
}

Andrew Betts 2010-08-04 02:07:40

ansaurus

tags:

views:

answers:

How to change Jquery UI Slider handle

related questions