CSS Snippet: Change handle slider question type

The CSS snipped shows that you can change the Slider’s handle by another icon.

The icon we used in this example, is a heart icon.

1. Upload the image that you want to use in your media library.
2. Resize the icon in your media library using the resize tool:
   
3. Double click the image to get the full image URL. Paste it somewhere you can get it back quickly, or keep this info open in a separate tab.
4. Go to Settings > Appearance > Custom CSS and paste the below code there.

.rangeslider__handle { 

    background-image: url(URL TO FILE IN MEDIA LIBRARY) !important; 

    background-size: 100% !important; 

    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .1)); 

    -moz-box-shadow: 0; 

    -webkit-box-shadow: 0; 

    box-shadow: none; 

   -moz-border-radius: 50%; 

   -webkit-border-radius: 0%; border-radius: 0; 

} 

.rangeslider__horizontal { 

   height: 4px; 

   width: 100%; 

} 

.rangeslider { 

    background: #000000; 

   position: relative; 

   height: 3px; 

} 

.rangeslider__filled { 

   background: #000000; 

   height: 10px !important; 

} 

.rangeslider__fill {

   -webkit-border-radius: 0 !important; 

   border-radius: 0 !important; 

} 

.rangeslider__handle { 

   background: none; 

   border: none; top: -15px !important; 

}

5. paste the image URL in the part background-image: url(URL TO FILE IN MEDIA LIBRARY)
6. Click on Save.

Download the image icon used in this example using this link

Tip: resize the image to 32 x 32 px

Here's a live example

Back to Survey CSS Snippets page