slider-configurator/test.html at main · brandonod/slider-configurator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pricingSlider { --slider-track: #931b1b; --slider-progress: #300e24; --slider-thumb: #a98484; --thumb-radius: 20%; --thumb-width: 60px; --slider-height: 45px; --sliderOutputText: #216282; } input[type="range"] { -webkit-appearance: none; width: 100%; height: var(--slider-height); border-radius: 4px; outline: none; margin: 20px 0; background: linear-gradient(to right, #931b1b 0%, #931b1b 100%); } /* WebKit Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; position: relative; top: 50%; transform: translateY(-50%); width: var(--thumb-width); height: var(--thumb-width); border-radius: var(--thumb-radius); background-color: var(--slider-thumb); cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; z-index: 2; } input[type="range"]::-webkit-slider-thumb:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Firefox Thumb */ input[type="range"]::-moz-range-thumb { width: var(--thumb-width); height: var(--thumb-width); border-radius: var(--thumb-radius); background-color: var(--slider-thumb); cursor: pointer; border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* WebKit Track */ input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: var(--slider-height); border-radius: 4px; } /* Firefox Track */ input[type="range"]::-moz-range-track { background: transparent; height: var(--slider-height); border-radius: 4px; border: none; } #sliderOutput { color: var(--sliderOutputText); }
    </style>
</head>
<body>
    <div id="pricingSlider"> <h2 id="sliderOutput">Purchase 42 poop and receive a 30% discount, making your total just €441.00!</h2> <input type="range" id="sliderInput" min="1" max="100" value="42" step="1" /> </div>
</body>
<script> const sliderInput = document.getElementById('sliderInput'); const sliderOutput = document.getElementById('sliderOutput'); const basePricePerUnit = 10; const discountPercent = 1; const unitDiscountStartFrom = 5; const unitType = "credit"; const unitTypePlural = "credits"; const symbol = "$"; const trackColor = "#cccccc"; const progressColor = "#ff0000"; function calculatePrice(units) { let total = units * basePricePerUnit; if (units >= unitDiscountStartFrom) { total *= (1 - discountPercent / 100); } return total.toFixed(2); } function getDiscountText(units) { return units >= unitDiscountStartFrom ? discountPercent + '%' : '0%'; } function updateSliderBackground() { const value = sliderInput.value; const min = sliderInput.min || 0; const max = sliderInput.max || 100; const percentage = ((value - min) / (max - min)) * 100; const gradient = `linear-gradient(to right, ${progressColor} 0%, ${progressColor} ${percentage}%, ${trackColor} ${percentage}%, ${trackColor} 100%)`; sliderInput.style.background = gradient; } function updateOutput(units) { const unitLabel = units === 1 ? unitType : unitTypePlural; sliderOutput.textContent = `Purchase ${units} ${unitLabel} and receive a ${getDiscountText(units)} discount, making your total just ${symbol}${calculatePrice(units)}!`; updateSliderBackground(); } sliderInput.addEventListener('input', (e) => { updateOutput(parseInt(e.target.value, 10)); }); updateOutput(15); updateSliderBackground(); </script>
</html>