title: custom image handle for nouislider
body: <p>I'm using noUislider with great effect on my website. Today I had the idea to change the handles from the boring rounded rectangles to images. I thought it would be a simple css 'background-image' addition, but it's proving to be impossible to get my images showing. I anyone here getting an image to show?</p>
  
  <p>The author of noUislider suggested the following css in the post <a href="https://github.com/leongersen/noUiSlider/issues/172" rel="noreferrer">https://github.com/leongersen/noUiSlider/issues/172</a>:</p>
  
  <pre><code>.noUi-handle {
    background-image: url('/path/to/your/image.png');
  }
  </code></pre>
  
  <p>I had added this into the jquery.nouislider.css file however this doesn't work. if the authors coding doesn't work then there is little hope. I currently have:</p>
  
  <pre><code>.noUi-handle {
      border: 1px solid #cccccc;
      border-radius: 5px;
      background: #fff; /* For Safari 5.1 to 6.0 */
      cursor: col-resize;
      box-shadow: inset 0 0 1px #FFF,
                  inset 0 1px 7px #EBEBEB,
                  0 3px 6px -3px #BBB;
  }
  </code></pre>
  
  <p>and when I change this to (replacing background with background-image):</p>
  
  <pre><code>.noUi-handle {
      border: 1px solid #cccccc;
      border-radius: 5px;
      background-image: url(images/handle.png);
      cursor: col-resize;
      box-shadow: inset 0 0 1px #FFF,
                  inset 0 1px 7px #EBEBEB,
                  0 3px 6px -3px #BBB;
  }
  </code></pre>
  
  <p>the handle is transparent, no image. can anyone help me here? such a silly problem! Many thanks.</p>