form
  div[role="group" aria-label="value picker" style="--n: 20; --k: 19"]
    input#o0[type="radio" name="o" style="--i: 0"]
    label[for="o0" style="--i: 0"]
      | 0
    input#o1[type="radio" name="o" style="--i: 1"]
    label[for="o1" style="--i: 1"]
      | 1
    input#o2[type="radio" name="o" style="--i: 2"]
    label[for="o2" style="--i: 2"]
      | 2
    input#o3[type="radio" name="o" style="--i: 3"]
    label[for="o3" style="--i: 3"]
      | 3
    input#o4[type="radio" name="o" style="--i: 4"]
    label[for="o4" style="--i: 4"]
      | 4
    input#o5[type="radio" name="o" style="--i: 5"]
    label[for="o5" style="--i: 5"]
      | 5
    input#o6[type="radio" name="o" style="--i: 6"]
    label[for="o6" style="--i: 6"]
      | 6
    input#o7[type="radio" name="o" style="--i: 7"]
    label[for="o7" style="--i: 7"]
      | 7
    input#o8[type="radio" name="o" style="--i: 8"]
    label[for="o8" style="--i: 8"]
      | 8
    input#o9[type="radio" name="o" style="--i: 9"]
    label[for="o9" style="--i: 9"]
      | 9
    input#o10[type="radio" name="o" style="--i: 10"]
    label[for="o10" style="--i: 10"]
      | 10
    input#o11[type="radio" name="o" style="--i: 11"]
    label[for="o11" style="--i: 11"]
      | 11
    input#o12[type="radio" name="o" style="--i: 12"]
    label[for="o12" style="--i: 12"]
      | 12
    input#o13[type="radio" name="o" style="--i: 13"]
    label[for="o13" style="--i: 13"]
      | 13
    input#o14[type="radio" name="o" style="--i: 14"]
    label[for="o14" style="--i: 14"]
      | 14
    input#o15[type="radio" name="o" style="--i: 15"]
    label[for="o15" style="--i: 15"]
      | 15
    input#o16[type="radio" name="o" style="--i: 16"]
    label[for="o16" style="--i: 16"]
      | 16
    input#o17[type="radio" name="o" style="--i: 17"]
    label[for="o17" style="--i: 17"]
      | 17
    input#o18[type="radio" name="o" style="--i: 18"]
    label[for="o18" style="--i: 18"]
      | 18
    input#o19[type="radio" name="o" style="--i: 19" checked="checked"]
    label[for="o19" style="--i: 19"]
      | 19

body,
div,
label {
  display: grid;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #1c1c1c;
}

form {
  place-self: center;
  overflow: hidden;
  width: 4em;
  border-radius: 0.75em;
  box-shadow: 0 3rem 6rem rgba(13, 13, 13, 0.2);
  background: #333333;
  font: 600 6.5em ubuntu, sans-serif;
  transition: transform 0.25s;
  pointer-events: none;
}
form:active {
  transform: scale(0.85);
}

[role="group"] {
  align-content: center;
  height: 2em;
  transform: translate(calc((0.5 - var(--k)) * 2em));
  transition: inherit;
}

[type="radio"] {
  z-index: 2;
  opacity: 0;
}
[type="radio"],
[type="radio"] + label {
  grid-area: 1 / calc(var(--i) + 1);
}
[type="radio"] + label {
  --dif: calc(var(--i) - var(--k));
  --sgn: clamp(-1, var(--dif), 1);
  --not-sel: min(1, max(-1 * var(--dif), var(--dif)));
  place-content: center;
  width: 2em;
  height: 4em;
  transform-origin: calc(50% * (1 - var(--sgn)));
  transform: scale(calc(1 - var(--not-sel) * 0.5));
  color: hsl(0, 0%, calc(100% - var(--not-sel) * 57%));
  transition: inherit;
  user-select: none;
  cursor: pointer;
}
[type="radio"]:not(:checked) + label {
  pointer-events: auto;
}

addEventListener('change', e => {
  let _t = e.target;

  _t.parentNode.style.setProperty('--k', +_t.style.getPropertyValue('--i'));
});