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.
- Upload the image that you want to use in your media library.
- Resize the icon in your media library using the resize tool:
- 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.
- 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;
}
- paste the image URL in the part background-image: url(URL TO FILE IN MEDIA LIBRARY)
- 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
Comments
0 comments
Please sign in to leave a comment.