Custom Image for Slider Handle

This page shows, how you can use a custom image for the handle of the slider.


  • You need a plugin or theme, which allows to add custom CSS to the page
  • You need an image for the handle, you can just upload it into WordPress’ media library and link it from there.


  1. Add a new CSS class “image-handle” to your slider via the “classes” option
  2. Add the following custom CSS to your page:
    .image-handle .noUi-handle {
         background-image: url(;
         border: 0px;
         box-shadow: none;
         width: 48px;
         height: 48px;
         left: -24px;
         top: -6px;
    .image-handle .noUi-target{
         border: 0px;