<div class="header">
      <span class="eyebrow">VALUE CONTROL</span>
      <h2>Adjust intensity</h2>
      <p>Drag the slider or use the controls.</p>
    </div>

</div>

</div>

</div>

<div>
        <span>Current level</span>
        <strong id="level">
          Balanced
        </strong>
      </div>

</div>

* {
  box-sizing: border-box;
}

:root {
  --value: 50%;
}

html,
body {
  margin: 0;
  min-height: 100%;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  color: #fff;

background:
    radial-gradient(
      circle at 50% 20%,
      #20254a,
      #0d1020 45%,
      #070810 80%
    );
}

/* PAGE */

.page {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

padding: 30px;
}

/* CARD */

.slider-card {
  width: min(520px, 94vw);

padding: 34px;

border:
    1px solid
    rgba(255,255,255,.1);

border-radius: 26px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );

backdrop-filter:
    blur(24px);

box-shadow:
    0 30px 80px
    rgba(0,0,0,.45);
}

/* HEADER */

.header {
  text-align: center;
}

.eyebrow {
  display: block;

margin-bottom: 8px;

font-size: 10px;
  font-weight: 700;

letter-spacing: 2.5px;

color:
    rgba(255,255,255,.35);
}

.header h2 {
  margin: 0;

font-size: 23px;

letter-spacing: -.6px;
}

.header p {
  margin:
    7px 0 0;

color:
    rgba(255,255,255,.45);

font-size: 12px;
}

/* VALUE */

.value-area {
  display: flex;
  align-items: center;
  justify-content: center;

gap: 34px;

margin:
    38px 0 33px;
}

.value-display {
  width: 170px;

text-align: center;

white-space: nowrap;
}

.value-display span {
  display: inline-block;

min-width: 115px;

font-size: 78px;
  font-weight: 250;

line-height: 1;

letter-spacing: -6px;

background:
    linear-gradient(
      135deg,
      #ffffff,
      #8e9fff
    );

-webkit-background-clip:
    text;

background-clip:
    text;

color: transparent;
}

.value-display small {
  margin-left: 5px;

color:
    rgba(255,255,255,.35);

font-size: 23px;
  font-weight: 300;
}

/* PLUS / MINUS */

.step-button {
  width: 48px;
  height: 48px;

border:
    1px solid
    rgba(255,255,255,.12);

border-radius: 50%;

background:
    rgba(255,255,255,.055);

color: white;

font-size: 24px;
  font-weight: 300;

cursor: pointer;

transition:
    transform .18s,
    background .18s,
    border-color .18s;
}

.step-button:hover {
  transform: scale(1.08);

background:
    rgba(255,255,255,.12);

border-color:
    rgba(255,255,255,.25);
}

.step-button:active {
  transform: scale(.92);
}

/* SLIDER */

.slider-wrapper {
  padding:
    0 3px;
}

#slider {
  width: 100%;
  height: 7px;

appearance: none;

border-radius: 20px;

outline: none;

cursor: pointer;

background:
    linear-gradient(
      to right,
      #7768ff 0%,
      #4fc5ff var(--value),
      rgba(255,255,255,.1) var(--value),
      rgba(255,255,255,.1) 100%
    );
}

/* CHROME / SAFARI */

#slider::-webkit-slider-thumb {
  appearance: none;

width: 25px;
  height: 25px;

border:
    4px solid #101329;

border-radius: 50%;

background: white;

box-shadow:
    0 0 0 2px
      #7286ff,

0 4px 16px
      rgba(100,120,255,.55);

transition:
    transform .15s;
}

#slider::-webkit-slider-thumb:hover {
  transform:
    scale(1.15);
}

/* FIREFOX */

#slider::-moz-range-thumb {
  width: 18px;
  height: 18px;

border:
    4px solid #101329;

border-radius: 50%;

background: white;

box-shadow:
    0 0 0 2px
    #7286ff;
}

/* TICKS */

.ticks {
  display: flex;
  justify-content: space-between;

margin-top: 11px;

color:
    rgba(255,255,255,.25);

font-size: 9px;
}

/* PRESETS */

.presets {
  display: grid;

grid-template-columns:
    repeat(5,1fr);

gap: 7px;

margin-top: 28px;
}

.presets button {
  padding:
    9px 4px;

border:
    1px solid
    rgba(255,255,255,.08);

border-radius: 9px;

background:
    rgba(255,255,255,.035);

color:
    rgba(255,255,255,.45);

font-size: 10px;

cursor: pointer;

transition:
    .2s;
}

.presets button:hover {
  background:
    rgba(255,255,255,.08);

color: white;
}

.presets button.active {
  border-color:
    rgba(120,120,255,.45);

background:
    rgba(110,100,255,.16);

color: white;
}

/* STATUS */

.status {
  display: flex;
  justify-content: space-between;
  align-items: center;

margin-top: 26px;
  padding-top: 20px;

border-top:
    1px solid
    rgba(255,255,255,.08);
}

.status span {
  display: block;

color:
    rgba(255,255,255,.35);

font-size: 9px;

text-transform: uppercase;

letter-spacing: 1px;
}

.status strong {
  display: block;

margin-top: 4px;

font-size: 12px;
  font-weight: 500;
}

/* INDICATOR */

.status-indicator {
  width: 52px;
  height: 10px;

padding: 2px;

border-radius: 20px;

background:
    rgba(255,255,255,.08);
}

.status-indicator span {
  display: block;

width: 50%;
  height: 100%;

border-radius: inherit;

background:
    linear-gradient(
      90deg,
      #7669ff,
      #4fc5ff
    );

box-shadow:
    0 0 10px
    rgba(79,197,255,.4);

transition:
    width .3s ease;
}

/* MOBILE */

@media (
  max-width: 500px
) {

.slider-card {
    padding:
      28px 20px;
  }

.value-area {
    gap: 18px;
  }

.value-display {
    width: 130px;
  }

.value-display span {
    min-width: 85px;

font-size: 60px;
  }

.step-button {
    width: 42px;
    height: 42px;
  }

}

const slider =
  document.getElementById(
    "slider"
  );

const valueDisplay =
  document.getElementById(
    "value"
  );

const increaseButton =
  document.getElementById(
    "increase"
  );

const decreaseButton =
  document.getElementById(
    "decrease"
  );

const level =
  document.getElementById(
    "level"
  );

const indicator =
  document.getElementById(
    "indicator"
  );

const presetButtons =
  document.querySelectorAll(
    ".presets button"
  );

let currentValue =
  Number(slider.value);

/* UPDATE EVERYTHING */

function setValue(newValue) {

newValue =
    Math.max(
      0,
      Math.min(
        100,
        newValue
      )
    );

currentValue =
    newValue;

slider.value =
    currentValue;

document
    .documentElement
    .style
    .setProperty(
      "--value",
      currentValue + "%"
    );

animateNumber(
    Number(
      valueDisplay.textContent
    ),
    currentValue
  );

indicator.style.width =
    currentValue + "%";

updateLevel();

updatePresets();

}

/* NUMBER ANIMATION */

function animateNumber(
  start,
  end
) {

const duration = 180;

const startTime =
    performance.now();

function update(time) {

const progress =
      Math.min(
        (
          time -
          startTime
        ) /
        duration,
        1
      );

const eased =
      1 -
      Math.pow(
        1 - progress,
        3
      );

const number =
      Math.round(
        start +
        (
          end -
          start
        ) *
        eased
      );

valueDisplay.textContent =
      number;

if (progress < 1) {

requestAnimationFrame(
        update
      );

}

requestAnimationFrame(
    update
  );

}

/* LABEL */

function updateLevel() {

if (
    currentValue === 0
  ) {

level.textContent =
      "Off";

}

else if (
    currentValue <= 25
  ) {

level.textContent =
      "Low";

}

else if (
    currentValue <= 60
  ) {

level.textContent =
      "Balanced";

}

else if (
    currentValue <= 85
  ) {

level.textContent =
      "High";

}

else {

level.textContent =
      "Maximum";

}

/* PRESETS */

function updatePresets() {

presetButtons.forEach(
    function(button) {

button.classList.toggle(
        "active",
        Number(
          button.dataset.value
        ) ===
        currentValue
      );

}
  );

}

/* SLIDER */

slider.addEventListener(
  "input",
  function() {

setValue(
      Number(
        slider.value
      )
    );

}
);

/* + BUTTON */

increaseButton.addEventListener(
  "click",
  function() {

setValue(
      currentValue + 5
    );

}
);

/* - BUTTON */

decreaseButton.addEventListener(
  "click",
  function() {

setValue(
      currentValue - 5
    );

}
);

/* PRESET BUTTONS */

presetButtons.forEach(
  function(button) {

button.addEventListener(
      "click",
      function() {

setValue(
          Number(
            button.dataset.value
          )
        );

}
    );

}
);

/* KEYBOARD */

document.addEventListener(
  "keydown",
  function(event) {

if (
      event.key ===
      "ArrowRight"
    ) {

setValue(
        currentValue + 1
      );

}

if (
      event.key ===
      "ArrowLeft"
    ) {

setValue(
        currentValue - 1
      );

}

}
);

/* INITIAL */

setValue(
  currentValue
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground