Konstantinos Koletsas Konstantinos Koletsas - 1 year ago 67
HTML Question

CSS: Small knob on the edge of a volume slider

I am using FlowPlayer to play a stream. Through the years we decided to drop our flash player and move to an HTML5 one.

The issue I am facing is that the new HTML5 skin should look like the flash one.

Flash Skin

HTML5 Skin

What is left to do is to replicate that small knob (circular) at the right edge of the volume slider. I've beeen trying to create an element and make it move with the volume bar but nothing came out of it.

I could really use some help.

The volumebar code.

<div class="fp-volumeslider">
<div class="fp-volumelevel animated" style="transition-duration: 0ms; width: 72%;">

The fp-volumelevel animated width is set every time the user slides the volume bar.


I think this will be useful for you:


.fp-volumelevel.animated::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    border: solid 6px #fff;
    border-radius: 50%;