Neumorphic Interactive 3D Vertical Slider

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="neu-slider-card">
  <input type="range" min="1" max="3" value="2" class="v-range" orient="vertical" />
  <div class="neu-labels"><span>1</span><span>2</span><span>3</span></div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.neu-slider-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: #e0e5ec; border-radius: 20px; box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff; }
.v-range { -webkit-appearance: none; appearance: none; width: 80px; height: 18px; background: #e0e5ec; border-radius: 10px; box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff; outline: none; transform: rotate(-90deg); margin: 30px -30px; cursor: pointer; }
.v-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #e0e5ec; border-radius: 50%; box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff; transition: background 0.2s; }
.v-range::-webkit-slider-thumb:hover { background: #6366f1; }
.neu-labels { display: flex; flex-direction: column; gap: 16px; font-family: system-ui; font-weight: 800; color: #64748b; font-size: 14px; }