Yes, you can insert a background image for the handle pseudo-element. Upload your image and add something like below to the end of template.css.
Regarding the slider track - its background is a colour gradient instead of an image. For responsiveness, I would leave it that way but you can change the colours as below.
Code:
/* Some more height for the slider container */
.slider-container {
margin-top: 4.5em;
}
/* Background image for the slider handle */
.slider .slider-handle.custom::before {
display: inline-block;
width: 36px;
height: 36px;
margin-top: -12px;
margin-left: -8px;
background: transparent url(../images/orange.png) center center no-repeat;
background-size: cover;
content: '';
}
/* Move the tooltip up a bit */
.slider .tooltip.top {
margin-top: -44px;
}
/* Colour gradient for the right part of the slider */
.slider-track {
background-image: -webkit-linear-gradient(top, #00E64D 0%, #00802B 100%);
background-image: -o-linear-gradient(top, #00E64D 0%, #00802B 100%);
background-image: linear-gradient(to bottom, #00E64D 0%, #00802B 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00E64D', endColorstr='#00802B', GradientType=0);
}
/* Colour gradient for the left part of the slider */
.slider-selection {
background-image: -webkit-linear-gradient(top, #FFC0CB 0%, #FF0000 100%);
background-image: -o-linear-gradient(top, #FFC0CB 0%, #FF0000 100%);
background-image: linear-gradient(to bottom, #FFC0CB 0%, #FF0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC0CB', endColorstr='#FF0000', GradientType=0);
}
Topic Author
