Как оформить элементы span для интерфейса недельного планировщика

Question

У меня есть следующий тест HTML код:

<div class="slider" day="mon">
  <span id="one" class="slider-segment"></span>
  <span class="slider-button" style="left: 25%;" key="1"></span>
  <span id="two" class="slider-segment"></span>
  <span id="three" class="slider-segment"></span>
</div>

и это мое CSS:

.slider {
    position: relative;
    width: 100%;
    background-color: #fff;
    height: 13px;
    margin-top: 10px;
}
.slider-segment {
    width: 100%;
    height: 13px;
    float: left;z
    text-align: center;
    white-space: nowrap;
}

.slider-button {
    background-image: url(https://sys.prosmartsystem.com//images/calendar-graphic-point-active-2.png);
display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    width: 15px;
    height: 13px;
    position: absolute;
    z-index: 99;
    cursor: pointer;
}

.slider-button::before {
      content: '';
    width: 3px;
    height: 5px;
    position: absolute;
    top: 4px;
    background-image: url(https://sys.prosmartsystem.com/images/calendar-graphic-point-arrow-left.png);
    left: -5px;
}

.slider-button::after {
      content: '';
    width: 3px;
    height: 5px;
    position: absolute;
    top: 4px;
    background-image: url(https://sys.prosmartsystem.com/images/calendar-graphic-point-arrow-right.png);
    right: -5px;
}

#one {
  left: 0%;
  width: 25%;
background-color: rgb(204, 204, 204);
}

#two {
  left: 25%;
  width: 12.5%;
background-color: rgb(176, 154, 198);
}

#three {
  left: 37.5%;
  width: 33.3333%;
  background-color: rgb(255, 143, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider" day="mon">
  <span id="one" class="slider-segment"></span>
  <span class="slider-button" style="left: 25%;" key="1"></span>
  <span id="two" class="slider-segment"></span>
  <span id="three" class="slider-segment"></span>
</div>

Это приводит к единственной фиктивной схеме для полного сегмента того, что должно быть частью еженедельного планировщика пользовательского интерфейса.

Я бы хотел стилизовать его так, чтобы он выглядел так:

У меня есть несколько проблем, которые я не знаю, как решить:

1) Эта серая точка посередине. Как я могу добавить "." и стилизовать его так, чтобы он выглядел похожим на этот. 2) Как включить круглые края точно так, как показано на рисунке. Между промежутками должны быть их. Наружные промежутки должны иметь только левый / правый закругленные края. 3) Как отобразить часы и дни, как на картинке-примере?