Create Vertical Stepper Using HTML and CSS

Welcome to the Codewithrandom blog. In this article, We learn how to create a Vertical Stepper Using Html,Css and JavaScript. Vertical Stepper  Is Number Sliding in a page to another page like if we have on number 1 page that show in bottom that we can move next page using Vertical Stepper.

I hope you enjoy our blog so let’s start with a basic HTML Structure for a Vertical Stepper.

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code For Vertical Stepper

<button class="stepper" type="button" value="0">
    <span class="stepper__value" data-pos="off-left" aria-hidden="true"
        >-2</span
    >
    <span class="stepper__value" data-pos="prev" aria-hidden="true">-1</span>
    <span class="stepper__value" data-pos="cur">0</span>
    <span class="stepper__value" data-pos="next" aria-hidden="true">1</span>
    <span class="stepper__value" data-pos="off-right" aria-hidden="true"
        >2</span
    >
    <span class="stepper__btn-area">
        <span class="stepper__btn-click" data-dir="down"></span>
    </span>
    <span class="stepper__btn-area">
        <span class="stepper__btn-click" data-dir="up"></span>
    </span>
</button>

CSS Code Vertical Stepper

 * {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button {
font: 1em/1.5 Inter, sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
.stepper {
background-color: var(--fg);
border-radius: 1em;
box-shadow: 0 0.75em 1em hsla(0,0%,0%,0.2);
color: var(--bg);
font-weight: bold;
overflow: hidden;
padding: 0.75em 0.375em;
position: relative;
width: 6em;
height: 3em;
transition:
background-color 0.3s,
color 0.3s,
transform 0.15s ease-in-out;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: #0000;
}
.stepper:active {
transform: scale(0.95);
transition-delay: 0s, 0s, 0.15s;
}
.stepper__btn-area,
.stepper__btn-area:before,
.stepper__btn-click,
.stepper__value {
position: absolute;
}
.stepper__btn-area,
.stepper__btn-area:before,
.stepper__btn-click {
display: block;
top: 0;
left: 0;
}
.stepper__btn-area {
width: 2em;
height: 3em;
}
.stepper__btn-area + .stepper__btn-area {
right: 0;
left: auto;
}
.stepper__btn-area:before {
border-radius: 50%;
box-shadow: 0 0 0 0 var(--bg) inset;
content: "";
opacity: 0;
pointer-events: none;
top: 0.5em;
width: 2em;
height: 2em;
transform: scale(2.5);
transition: all 0.4s ease-out;
}
.stepper__btn-area:not(:disabled):active:before {
box-shadow: 0 0 0 1em var(--bg) inset;
opacity: 0.25;
transform: scale(1);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
}
.stepper__btn-click {
width: 100%;
height: 100%;
}
.stepper__value {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
display: inline-block;
font-size: 1.5em;
line-height: 1;
top: calc(50% - 0.75rem);
left: calc(50% - 1rem);
text-align: center;
width: 2rem;
height: 1.5rem;
-webkit-user-select: none;
user-select: none;
}
.stepper__value[data-pos="off-left"],
.stepper__value[data-pos="prev"],
.stepper__value[data-pos="next"],
.stepper__value[data-pos="off-right"] {
opacity: 0.5;
}
.stepper__value[data-pos="off-left"] {
transform: translateX(-2.67em) scale(0.5);
}
.stepper__value[data-pos="prev"] {
transform: translateX(-1.33em) scale(0.5);
}
.stepper__value[data-pos="cur"] {
transform: translateX(0);
}
.stepper__value[data-pos="next"] {
transform: translateX(1.33em) scale(0.5);
}
.stepper__value[data-pos="off-right"] {
transform: translateX(2.67em) scale(0.5);
}
.stepper--move-left .stepper__value[data-pos="off-left"] {
animation-name: moveOffLeft;
}
.stepper--move-left .stepper__value[data-pos="prev"] {
animation-name: middleToLeft;
}
.stepper--move-left .stepper__value[data-pos="cur"] {
animation-name: rightToMiddle;
}
.stepper--move-left .stepper__value[data-pos="next"] {
animation-name: comeInRight;
}
.stepper--move-right .stepper__value[data-pos="prev"] {
animation-name: comeInLeft
}
.stepper--move-right .stepper__value[data-pos="cur"] {
animation-name: leftToMiddle
}
.stepper--move-right .stepper__value[data-pos="next"] {
animation-name: middleToRight;
}
.stepper--move-right .stepper__value[data-pos="off-right"] {
animation-name: moveOffRight;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,20%);
--fg: hsl(var(--hue),10%,90%);
}
}
/* Animations */
@keyframes comeInRight {
from {
transform: translateX(2.67em) scale(0.5);
}
to {
transform: translateX(1.33em) scale(0.5);
}
}
@keyframes rightToMiddle {
from {
opacity: 0.5;
transform: translateX(1.33em) scale(0.5);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes middleToLeft {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0.5;
transform: translateX(-1.33em) scale(0.5);
}
}
@keyframes moveOffLeft {
from {
transform: translateX(-1.33em) scale(0.5);
}
to {
transform: translateX(-2.67em) scale(0.5);
}
}
@keyframes comeInLeft {
from {
transform: translateX(-2.67em) scale(0.5);
}
to {
transform: translateX(-1.33em) scale(0.5);
}
}
@keyframes leftToMiddle {
from {
opacity: 0.5;
transform: translateX(-1.33em) scale(0.5);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes middleToRight {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0.5;
transform: translateX(1.33em) scale(0.5);
}
}
@keyframes moveOffRight {
from {
transform: translateX(1.33em) scale(0.5);
}
to {
transform: translateX(2.67em) scale(0.5);
}
}

Javascript Code Vertical Stepper

 window.addEventListener("DOMContentLoaded",() => {
const stepper = new SlidingStepper(".stepper",{
step: 1,
min: -9,
value: 0,
max: 99
});
});
class SlidingStepper {
constructor(qs,args) {
const { step, min, value, max } = args;
this.el = document.querySelector(qs);
this.step = step !== undefined ? step : 1;
this.min = min !== undefined ? min : -9;
this.value = value !== undefined ? value : 0;
this.max = max !== undefined ? max : 99;
this.valuePos = 0;
this.values = [];
this.posData = [
"off-left",
"prev",
"cur",
"next",
"off-right"
];
this.init();
this.changeValue();
if (this.el) {
this.el.addEventListener("click",this.changeValue.bind(this));
this.el.addEventListener("keydown",this.changeValue.bind(this));
}
}
init() {
// ensure step is a number above 0, or suffer an infinite loop later
if (this.step < 1 || isNaN(this.step))
this.step = 1;
// handle a value being outside bounds
if (this.value < this.min)
this.value = this.min;
else if (this.value > this.max)
this.value = this.max;
// ensure min is less than max, or make it same as max
if (this.min > this.max)
this.min = this.max;
// load values before initial…
for (let l = this.value; l >= this.min; l -= this.step)
this.values.unshift(l);
this.values.unshift(this.min);
// …then those after it
for (let r = this.value; r <= this.max; r += this.step)
this.values.push(r);
this.values.push(this.max);
// kill the dupes
this.values = [...new Set(this.values)];
// initial value
this.valuePos = this.values.indexOf(this.value);
}
changeValue(e) {
// get the direction
let dir = null;
if (e) {
const { key, target } = e;
if (key) {
if (key === "ArrowUp" || key === "ArrowRight")
dir = "up";
else if (key === "ArrowDown" || key === "ArrowLeft")
dir = "down";
} else {
dir = target.getAttribute("data-dir");
}
}
// reset the animation
const cl = this.el ? this.el.classList : null;
if (cl) {
cl.remove("stepper--move-left","stepper--move-right");
void this.el.offsetWidth;
}
// increment or decrement, apply the animation
if (dir === "up" && this.valuePos < this.values.length - 1) {
++this.valuePos;
cl.add("stepper--move-left");
} else if (dir === "down" && this.valuePos > 0) {
--this.valuePos;
cl.add("stepper--move-right");
}
this.value = this.values[this.valuePos];
this.el.value = this.value;
// update the display
if (this.el) {
this.posData.forEach((p,i) => {
const pos = this.el.querySelector(`[data-pos="${p}"]`);
if (pos) {
const relIndex = this.valuePos + (i - 2);
const value = this.values[relIndex];
pos.innerText = value !== undefined ? value : "";
}
});
}
}
}

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Final Output Of Vertical Stepper