title: How to customize slider-handlers with an image
body: <p>does anybody know how to customize the handlers in a JQuery Range Slider? I've been searching in internet and there are variety of answers, and most of them point to change the ui-slider-handle class setting the background with the image you want to be displayed. Well, I've tried everything but it doesn't change anything. Maybe I'm missing something. I show you my code</p>
  
  <p>These are the classes that I've overriden from jquery-ui. There are more in the library but these are the ones I've overriden. Notice I've set the image in ui-slider ui-slider-handle class </p>
  
  <p>slider.css</p>
  
  <pre><code>.ui-slider-horizontal {
      height: .2em;
      top: .15em;
  }
  
  .ui-slider-horizontal .ui-slider-handle {
      top: -.6em;
      margin-left: -.6em;
  }
  
  .ui-slider .ui-slider-range {
      position: absolute;
      z-index: 1;
      font-size: .7em;
      display: block;
      border: 0;
      background-color: red;
      background-position: 0 0;
  }
  
  .ui-widget-content {
      border: 1px solid #aaaaaa;
      background: grey url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
      color: #222222;
  }
  
  .ui-slider .ui-slider-handle {
      position: absolute;
      background: url(../images/handle.png) no-repeat;
      overflow: hidden;
      border: none;
      z-index: 2;
      width: 1.2em;
      height: 1.2em;
      cursor: default;
      -ms-touch-action: none;
      touch-action: none;
  }
  </code></pre>
  
  <p>And this is my html</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $("#slider-range1").slider({
              animate: "fast",
              range: true,
              min: 0,
              max: 500,
              values: [75, 300],
              slide: function(event, ui) {
                  $("#amount-min1").val(ui.values[0] + "€");
                  $("#amount-max1").val(ui.values[1] + "€");
              }
          });
          $("#amount-min1").val($("#slider-range1").slider("values", 0) + "€");
          $("#amount-max1").val($("#slider-range1").slider("values", 1) + "€");
      });
  &lt;/script&gt;
  &lt;div class="filter-results"&gt;
      &lt;div class="wrapper-title-range"&gt;
          &lt;p class="text-title-range"&gt;Rango valoración&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="wrapper-range"&gt;
          &lt;div id="slider-range1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="min-value"&gt;
          &lt;input type="text" id="amount-min1" class="input-value min"&gt;
      &lt;/p&gt;
      &lt;p class="max-value"&gt;
          &lt;input type="text" id="amount-max1" class="input-value max aligned-right"&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>