How to change Jquery UI Slider handle

jquery jquery-ui jquery-plugins slider

119,340

Solution 1

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"></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">
  .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?

Solution 2

.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; 
}

Solution 3

If you should need to replace the handle with something else entirely, rather than just restyling it:

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>');

$('.slider').slider({
  range: "min",
  value: 10
});

.slider .ui-state-default {
  background: none;
}
.slider.ui-slider .ui-slider-handle {
  width: 14px;
  height: 18px;
  margin-left: -5px;
  top: -4px;
  border: none;
  background: none;
}
.slider {
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="slider"></div>

Solution 4

You also should set border:none to that css class.

View more solutions

119,340

Tom

I'm just one of the 60 million British people in a world of 6 billion. The good thing is, million-to-one chances should happen to me quite often right?

Updated on February 09, 2020

Comments

Tom over 4 years

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?

Chris22 about 12 years

I copied & pasted this exact code in DW and tried it. I replaced the image with my own. Not the slider nor the image display at all. I've tried every solution listed concerning this topic and nothing has worked to change the images. I'll post my code under my own thread and if there is a working solution on SO, hopefully someone can list the URL on SO.
Matthias Braun about 11 years

The link to the png is broken.
Bhavesh Odedra over 8 years

Please add some comments about your solution on why and how it solves the problem
Alexander Dixon almost 8 years

This should be the accept answer for thoroughness and the working example. Why style a pre-existing element with you can simply inject your own?