You are currently viewing Create Vertical Stepper Using HTML and CSS

Create Vertical Stepper Using HTML and CSS

Telegram Group Join Now

Create Vertical Stepper Using HTML and CSS

 
Create Vertical Stepper Using HTML & CSS
Create Vertical Stepper Using HTML & 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

Code by Jon Kantner
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive Yes
Vertical Stepper Table

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>

ADVERTISEMENT

There is all HTML code for the Vertical Stepper project. Now, you can see output without CSS And Javascript. then we write css & javascript for the Vertical Stepper project code.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Html output of Vertical Stepper

 
Create Vertical Stepper Using HTML & CSS
Create Vertical Stepper Using HTML Code Preview

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);
}
}

Here is our updated output Of Css Code.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Html Css Output Of Vertical Stepper

 
Create Vertical Stepper Using HTML & CSS
Create Vertical Stepper Using HTML & CSS Code Preview

 

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

Vertical Stepper Css | Sliding Stepper using Html Css Javascript
 

Now we have completed our Vertical Stepper Using HTML, CSS, and JavaScript. Here is our updated output with javascript code. I hope you like the Vertical Stepper. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

10+ Javascript Project Ideas For Beginners( Project Source Code)

In this post, we learn how to create a Vertical Stepper using simple HTML, CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Codepen by – Jon Kantner

Which code editor do you use for this Vertical Stepper coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

Telegram Group Join Now

Leave a Reply