Desktops on Rent

// Get slider elements const sliderContainer = document.getElementById("slider-container"); const sliderProgress = document.getElementById("slider-progress"); const sliderThumb = document.getElementById("slider-thumb"); // Get price elements const windowAc1TrPrice = document.getElementById("window-ac-1tr-price"); const windowAc1_5TrPrice = document.getElementById("window-ac-1_5tr-price"); // Define mark values const markValues = { 3: { windowAc1Tr: 1900, windowAc1_5Tr: 2400 }, 6: { windowAc1Tr: 1800, windowAc1_5Tr: 2300 }, 12: { windowAc1Tr: 1700, windowAc1_5Tr: 2200 } }; // Flag to track dragging state let isDragging = false; // Function to update slider position and values const updateSlider = (x) => { const rect = sliderContainer.getBoundingClientRect(); let newX = x - rect.left; if (newX rect.width) newX = rect.width; // Update slider thumb position and progress width sliderThumb.style.left = `${newX}px`; sliderProgress.style.width = `${newX}px`; // Determine the nearest mark and update values const closestMark = getClosestMark(newX, rect.width); updateValues(closestMark); }; // Function to get the closest mark based on slider position const getClosestMark = (position, totalWidth) => { const marks = Object.keys(markValues).map((mark) => parseInt(mark)); const markPositions = marks.map((mark) => (mark / 12) * totalWidth); let closestMark = marks[0]; let minDistance = Math.abs(markPositions[0] - position); for (let i = 1; i < marks.length; i++) { const distance = Math.abs(markPositions[i] - position); if (distance { windowAc1TrPrice.textContent = `Window A/C (1 TR): ₹ ${markValues[mark].windowAc1Tr} / mo`; windowAc1_5TrPrice.textContent = `Window A/C (1.5 TR): ₹ ${markValues[mark].windowAc1_5Tr} / mo`; }; // Event listeners for dragging functionality sliderThumb.addEventListener("mousedown", (e) => { isDragging = true; }); document.addEventListener("mouseup", () => { isDragging = false; }); document.addEventListener("mousemove", (e) => { if (isDragging) { updateSlider(e.clientX); } }); // Event listener for click functionality on slider container sliderContainer.addEventListener("click", (e) => { updateSlider(e.clientX); }); // Event listeners for click functionality on marks document.querySelectorAll(".mark").forEach((mark) => { mark.addEventListener("click", (e) => { const value = parseInt(mark.getAttribute("data-value")); const rect = sliderContainer.getBoundingClientRect(); const position = (value / 12) * rect.width; updateSlider(rect.left + position); }); }); .card { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 30vh; margin: 0; background-color: ; } .slider-container { position: relative; width: 30vh; height: 10px; background-color: #ccc; border-radius: 5px; margin-bottom: 20px; } .slider-progress { position: absolute; height: 100%; background-color: cyan; border-radius: 5px; } .slider-thumb { position: absolute; width: 20px; height: 20px; background-color: white; border: 3px solid cyan; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; } .marks { position: relative; width: 30vh; height: 20px; margin-bottom: 20px; } .mark { position: absolute; transform: translateX(-50%); cursor: pointer; } .info-container { display: grid; grid-template-columns: 1fr 1fr; width: 300px; gap: 10px; } .info-box { background-color: white; padding: 8px; top-padding :15px; border: 1px solid #ddd; border-radius: 5px; text-align: center; } .price { font-size: 12px; font-weight: bold; display: block; } .label { font-size: 14px; color: #666; display: block; }