DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

3

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.

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>
Enter fullscreen mode Exit fullscreen mode

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.

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);
}
}
Enter fullscreen mode Exit fullscreen mode

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 : "";
}
});
}
}
}
Enter fullscreen mode Exit fullscreen mode

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

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (1)

Collapse
 
growkon21 profile image
Growkon

This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
International schools in Hyderabad

AWS Industries LIVE! Stream

Watch AWS Industries LIVE!

Discover how cloud technology is solving real-world problems on Industries LIVE!

Learn More

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay