Input range - position each step

Question 1

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.

Question 2

"I would like that my ship icon will start on the left side of the point (circle)" - If you do that (perhaps with a translate: -58px), the ship will start mostly offscreen. You should widen the whole thing with space either side for a starting space.

CollectivesTM on Stack Overflow

Input range - position each step

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions