Search code examples
cssgraphicsfrontendsliderwebkit

How to customise slider thumb's shape with CSS and Webkit?

I know how to customise some properties of a slider's thumb with CSS and Webkit. E.g.:

#slider::-webkit-slider-thumb{
    box-shadow: 0px 0px 0px #000000;
    border-radius: 50%;
    border: 3px solid #0ac2ac;
    background: #0ac2ac;
    cursor: pointer;
    -webkit-appearance: none;
    cursor: grabbing;
    height: 15px;
    width: 15px;
}

Instead, I do not know and failed to find on the Web how to customise a slider thumb's shape by using CSS and Webkit.

I wish to use a polygonal shape instead of the slider thumb's default round shape.

Is there a way to do that by using CSS and Webkit? If not, what is the most efficient alternative solution for achieving my purpose?

Thanks!

Solution

  • I solved it by adding clip-path: polygon(<path>) and changing background: <colour> to background: url("<entire svg code>") to the style shown in my question.