Navigation

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