How to change Jquery UI Slider handle

Question

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    http   jqueryfordesigners com slider-gallery  http   www ryancoughlin com 2008 11 04 using-the-jquery-ui-slider  http   www keepthewebweird com creating-a-nice-slider-with-jquery-ui    But I can t get it to work  The following code results in a stationary handle image    lt  DOCTYPE html gt   lt html gt   lt head gt     lt link type  text css  href  http   jqueryui com latest themes base ui all css  rel  stylesheet    gt     lt script type  text javascript  src  http   jqueryui com latest jquery-1 3 2 js  gt  lt  script gt     lt script type  text javascript  src  http   jqueryui com latest ui ui core js  gt  lt  script gt     lt script type  text javascript  src  http   jqueryui com latest ui ui slider js  gt  lt  script gt     lt style type  text css  gt     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         lt  style gt     lt script type  text javascript  gt      document  ready function            slider   slider  handle    myhandle              lt  script gt   lt  head gt   lt body gt   lt div id  slider  gt  lt div id  myhandle  gt  lt  div gt  lt  div gt   lt  body gt   lt  html gt    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

User · Answer

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

_x000D_

$('.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>');_x000D_
_x000D_
$('.slider').slider({_x000D_
  range: "min",_x000D_
  value: 10_x000D_
});

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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    lt  DOCTYPE html gt   lt html gt   lt head gt     lt link type  text css  href  http   jqueryui com latest themes base ui all css  rel  stylesheet    gt     lt script type  text javascript  src  http   jqueryui com latest jquery-1 3 2 js  gt  lt  script gt     lt script type  text javascript  src  http   jqueryui com latest ui ui core js  gt  lt  script gt     lt script type  text javascript  src  http   jqueryui com latest ui ui slider js  gt  lt  script gt     lt style type  text css  gt     ui-slider-horizontal  ui-state-default  background  white url http   stackoverflow com content img so vote-arrow-down png  no-repeat scroll 50  50       lt  style gt     lt script type  text javascript  gt      document  ready function            slider   slider             lt  script gt   lt  head gt   lt body gt   lt div id  slider  gt  lt  div gt   lt  body gt   lt  html gt    I think registering a handle option was the old way of doing it and no longer supported in JQuery-ui 1 7 2

User · Answer

You also should set border none to that css class

User · Answer

This change only first handle in multihandle slider  In apiDoc you can see  For example  if you specify values    1  5  18   and create one custom handle  the plugin will create the other two

[jquery] How to change Jquery UI Slider handle

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-plugins

Examples related to slider