Custom Image for Slider Handle

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

Prerequisites

  • 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.

Steps

  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(https://wp-products.moewe.io/wp-content/uploads/2014/11/1415376532_agt_web.png);
         border: 0px;
         box-shadow: none;
         width: 48px;
         height: 48px;
         left: -24px;
         top: -6px;
    }
    
    .image-handle .noUi-target{
         border: 0px;
    }

 

Sources