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

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

You also should set border none to that css class

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   x000D      slider   append   lt div class  my-handle ui-slider-handle  gt  lt svg height  18  width  14  gt  lt path d  M13 9 5 1 A 10 10 0  0  0  5 17z   gt  lt  svg gt  lt  div gt     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   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 9 1 jquery-ui min js  gt  lt  script gt  x000D   lt link href  https   code jquery com ui 1 9 2 themes base jquery-ui css  rel  stylesheet    gt  x000D   lt div class  slider  gt  lt  div gt  x000D   x000D   x000D

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

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

[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