Thiết kế website giá rẻ

Question

I have horizontal points with months.
Above points, I would like to create a shape (ship) that you can drag to the next steps.
A few points are grouped to display the same slide.

The gap between points is 10px and each point has width 29px.
I would like that my ship icon will start on the left side of the point (circle).

https://prnt.sc/ngT2ApoiAV5f

function updateSliderOffset($inputRange, inputValue) {
  const circleWidth = 29;
  const gapWidth = 10;
  const totalWidth = circleWidth + gapWidth;
  const offset = totalWidth * inputValue;

  $inputRange.get(0).style.setProperty("--slider-offset", `${offset}px`);
}

function componentCalendar() {
  $(".pd-calendar-heading").animate({}, function() {
    let $calendarHeading = $(this),
      $block = $calendarHeading.closest(".pd-block");
    let $calendarUnits = $calendarHeading.find(".pd-calendar-units");
    let $calendarContent = $block.find(".pd-calendar-content"),
      $calendarSlider = $calendarContent.find(".pd-calendar-slider__inner");


    let $inputRange = $calendarHeading.find(".pd-range-slider__input");

    $calendarUnits
      .find('.pd-calendar-unit[data-calendar-index="1"]')
      .addClass("active")
      .parent(".pd-calendar-units__group")
      .addClass("active");

    $calendarUnits.on("click", ".pd-calendar-unit", function(e) {
      e.preventDefault();


      let $unitElem = $(this),
        unitIndex = parseInt($unitElem.data("calendar-index")),
        inputValue = unitIndex - 1,
        unitSlideIndex = $unitElem.data("slide-index");

      $inputRange.val(inputValue);
      $calendarSlider.slick("slickGoTo", unitSlideIndex);

      updateSliderOffset($inputRange, inputValue);
    });

    $calendarSlider
      .slick({
        arrows: true,
        fade: true,
      })
      .on("beforeChange", function(event, slick, currentSlide, nextSlide) {
        let $nextSlide = $(slick.$slides.get(nextSlide)),
        nextSlideIndex = $nextSlide.find('.pd-calendar-slide').attr('data-calendar-index'),
        inputValue = nextSlideIndex - 1;

        $calendarUnits
          .find(".pd-calendar-unit[data-calendar-index]")
          .removeClass("active")
          .parent(".pd-calendar-units__group, .pd-calendar-units__group")
          .removeClass("active");

        $calendarUnits
          .find(
            '.pd-calendar-unit[data-calendar-index="' + nextSlideIndex + '"]'
          )
          .addClass("active")
          .parent(".pd-calendar-units__group")
          .addClass("active");

        $inputRange.val(inputValue);
        updateSliderOffset($inputRange, inputValue);
      });



    $inputRange.on("input", function() {
      let $input = $(this),
        inputValue = parseInt($input.val()),
        unitNumber = inputValue + 1;

      let $unitElem = $calendarUnits.find(
          '.pd-calendar-unit[data-calendar-index="' + unitNumber + '"]'
        ),
        unitSlideIndex = $unitElem.data("slide-index");

      $calendarSlider.slick("slickGoTo", unitSlideIndex);
      updateSliderOffset($input, inputValue);
    });
  });
}

$(document).ready(function() {
  componentCalendar();
});

.pd-calendar-units {
  overflow: auto;
  width: 100%;
  margin-top: 18px;
  padding-top: 45px;
  position: relative;
}
.pd-calendar-units .pd-range-slider {
  padding: 0;
  margin: 0 0 30px;
  width: 1160px;
}
.pd-calendar-units .pd-range-slider__input {
  display: block;
  width: 100%;
  background-color: transparent;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
}
.pd-calendar-units .pd-range-slider__input::-webkit-slider-runnable-track {
  background: orange;
  height: 5px;
}
.pd-calendar-units .pd-range-slider__input::-moz-range-track {
  background: orange;
  height: 5px;
}
.pd-calendar-units .pd-range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  background: yellow;
  display: block;
  width: 66px;
  height: 20px;
  margin-top: -20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 75 23'%3E%3Cpath fill='none' stroke='%23238dc1' d='m9.3 16.5-5-5h62.5l-5 5m-46-5V1h6v10.5m3 0v-4h34.5v4m-51-.5V7h5v4'/%3E%3Cpath fill='%23238dc1' fill-rule='evenodd' d='M1.5 15.4c.2 3.6 3.2 6.4 6.8 6.4s6.6-2.8 6.8-6.4h1c-.3 4.1-3.7 7.3-7.9 7.3S.7 19.5.5 15.4h1Z'/%3E%3Cpath fill='%23238dc1' fill-rule='evenodd' d='M16.1 15.4c.2 3.6 3.2 6.4 6.8 6.4s6.6-2.8 6.8-6.4h1c-.3 4.1-3.7 7.3-7.9 7.3s-7.5-3.2-7.7-7.3h1Z'/%3E%3Cpath fill='%23238dc1' fill-rule='evenodd' d='M30.7 15.4c.2 3.6 3.2 6.4 6.8 6.4s6.6-2.8 6.8-6.4h1c-.3 4.1-3.7 7.3-7.9 7.3s-7.5-3.2-7.7-7.3h1Z'/%3E%3Cpath fill='%23238dc1' fill-rule='evenodd' d='M45.2 15.4c.2 3.6 3.2 6.4 6.8 6.4s6.6-2.8 6.8-6.4h1c-.3 4.1-3.7 7.3-7.9 7.3s-7.5-3.2-7.7-7.3h1Z'/%3E%3Cpath fill='%23238dc1' fill-rule='evenodd' d='M59.9 15.4c.2 3.6 3.2 6.4 6.8 6.4s6.6-2.8 6.8-6.4h1c-.3 4.1-3.7 7.3-7.9 7.3s-7.5-3.2-7.7-7.3h1Z'/%3E%3C/svg%3E");
  transform: translateX(var(--slider-offset));
}
.pd-calendar-units__inner, .pd-calendar-units__group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.pd-calendar-units__inner {
  width: 100%;
}
.pd-calendar-units__group {
  position: relative;
}
.pd-calendar-units__group.active .pd-calendar-unit.group-first-element .pd-calendar-unit__circle {
  background-color: blue;
}
.pd-calendar-units__group.active .pd-calendar-unit.group-first-element ~ .pd-calendar-unit .pd-calendar-unit__circle {
  background-color: #d9d9d9;
}
.pd-calendar-units__group.active .pd-calendar-unit.group-first-element ~ .pd-calendar-unit:last-child .pd-calendar-unit__circle {
  background-color: blue;
}
.pd-calendar-units__group.active .pd-calendar-unit.group-first-element ~ .pd-calendar-unit:last-child .pd-calendar-unit__name {
  color: blue;
}

.pd-calendar-unit {
  text-orientation: mixed;
}
.pd-calendar-unit__inner {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pd-calendar-unit__inner > * {
  transition: all 0.3s ease-in-out;
}
.pd-calendar-unit__circle {
  content: "";
  background-color: green;
  display: block;
  width: 29px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.15);
}
.pd-calendar-unit__name {
  font-size: 15px;
  color: grey;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.pd-calendar-unit:hover .pd-calendar-unit__circle {
  background-color: blue;
}
.pd-calendar-unit:hover .pd-calendar-unit__name {
  color: blue;
}
.pd-calendar-unit.active .pd-calendar-unit__circle {
  background-color: blue;
}
.pd-calendar-unit.active .pd-calendar-unit__name {
  color: blue;
}

.pd-calendar-slider {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  width: 600px;
  margin-top: 50px;
}
.pd-calendar-slider__inner {
  width: 100%;
}

.pd-calendar-slide {
  background-color: lightblue;
  height: 100%;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.25);
  padding: 30px 21px;
}
.pd-calendar-slide__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pd-calendar-slide__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.pd-calendar-event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
.pd-calendar-event *:last-child {
  margin-bottom: 0;
}
.pd-calendar-event__label, .pd-calendar-event__text {
  font-size: 15px;
  line-height: 1.31;
  font-weight: 400;
  color: black;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<section class="pd-block">
  <div class="pd-calendar-heading">
    <div class="pd-calendar-units">
      <div class="pd-range-slider">
        <input class="pd-range-slider__input" name="unit-value" type="range" value="0" min="0" max="29" step="1">

      </div>

      <div class="pd-calendar-units__inner">

        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="1" data-slide-index="0">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                February </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="2" data-slide-index="0">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                March </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-unit" data-calendar-index="3" data-slide-index="1">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              April </span>
          </div>
        </div>

        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="4" data-slide-index="2">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                May </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="5" data-slide-index="2">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                June </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="6" data-slide-index="3">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                July </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="7" data-slide-index="3">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                August </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-unit" data-calendar-index="8" data-slide-index="4">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              September </span>
          </div>
        </div>

        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="9" data-slide-index="5">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                October </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="10" data-slide-index="5">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                November </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="11" data-slide-index="5">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                December </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="12" data-slide-index="5">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                January </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="13" data-slide-index="5">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                February </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-unit" data-calendar-index="14" data-slide-index="6">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              March </span>
          </div>
        </div>

        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="15" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                April </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="16" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                May </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="17" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                June </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="18" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                July </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="19" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                August </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="20" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                September </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="21" data-slide-index="7">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                October </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-unit" data-calendar-index="22" data-slide-index="8">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              November </span>
          </div>
        </div>

        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="23" data-slide-index="9">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                December </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="24" data-slide-index="9">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                January </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="25" data-slide-index="9">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                February </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="26" data-slide-index="9">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                March </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-units__group">
          <div class="pd-calendar-unit group-first-element" data-calendar-index="27" data-slide-index="10">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                April </span>
            </div>
          </div>

          <div class="pd-calendar-unit" data-calendar-index="28" data-slide-index="10">
            <div class="pd-calendar-unit__inner">
              <span class="pd-calendar-unit__circle"></span>
              <span class="pd-calendar-unit__name">
                May </span>
            </div>
          </div>
        </div>
        <div class="pd-calendar-unit" data-calendar-index="29" data-slide-index="11">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              June </span>
          </div>
        </div>

        <div class="pd-calendar-unit" data-calendar-index="30" data-slide-index="11">
          <div class="pd-calendar-unit__inner">
            <span class="pd-calendar-unit__circle"></span>
            <span class="pd-calendar-unit__name">
              July </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pd-calendar-content">
    <div class="pd-calendar-slider">
      <div class="pd-calendar-slider__inner">
        <div class="pd-calendar-slide" data-calendar-index="1">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">February-March:</span>
                  <div class="pd-calendar-event__text">Example Text 1</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="3">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">April:</span>
                  <div class="pd-calendar-event__text">Example Text 3</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="4">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">May-June:</span>
                  <div class="pd-calendar-event__text">Example Text 4</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="6">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">July-August:</span>
                  <div class="pd-calendar-event__text">Example Text 6</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="8">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">September:</span>
                  <div class="pd-calendar-event__text">Example Text 8</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="9">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">October-February:</span>
                  <div class="pd-calendar-event__text">Example Text 9</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="14">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">March:</span>
                  <div class="pd-calendar-event__text">Example Text 14</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="15">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">April-October:</span>
                  <div class="pd-calendar-event__text">Example Text 15</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="22">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">November:</span>
                  <div class="pd-calendar-event__text">Example Text 22</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="23">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">December-March:</span>
                  <div class="pd-calendar-event__text">Example Text 23</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="27">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">April-May:</span>
                  <div class="pd-calendar-event__text">Example Text 27</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pd-calendar-slide" data-calendar-index="29">
          <div class="pd-calendar-slide__inner">

            <div class="pd-calendar-slide__content">
              <div class="pd-calendar-event">
                <div class="pd-calendar-event__content">
                  <span class="pd-calendar-event__label">June:</span>
                  <div class="pd-calendar-event__text">Example Text 29</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Codepen link: https://codepen.io/matteokrr/pen/xxoqXMo

I tried to use translateX() and calculate the distance from left based on the input value.

Thiết kế website giá rẻ

Danh mục

Input range – position each step