title: recreate a round slider with a dot inside CSS instead of picture
body: <p>Trying since 1 hour now to recreate this slider:</p>
  <p>Slider</p>
  <p><img src="https://i.stack.imgur.com/YIL1M.png" alt="1" /></p>
  <p>This is mir progress so far:</p>
  <p><img src="https://i.stack.imgur.com/9grqL.png" alt="2" /></p>
  <p>its a Span element i try to style - here are my code attempts (researched alot , found outline, shadow, but nothing seems to get the job done)</p>
  <pre><code>left: 0%;
  background: rgb(94, 173, 61);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  top: 0%;
  outline: 3px red solid;
  outline-offset: 10px;
  box-shadow: 0 0 0 5px red;
  box-shadow: spread 5px;
  </code></pre>
  <p>progress with code</p>
  <p><img src="https://i.stack.imgur.com/ISxLf.png" alt="3" /></p>
  <p>Is it possible with css or should i just use a picture ?</p>
  <p>ps. in the preview dosent show the pictures only a link to it. hope it works in the posted question</p>