CSS Shape Slider with 1 line of JS Code

Tutorial for 'CSS Shape Slider' using 1 line of JS Code.

Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Let's Begin!

Overview

This section of the HTML document contains a CSS-based slider <input type="range"> that dynamically updates the class of a shape element <div class="shape">. As the user moves the slider, the shape’s class name changes, allowing for styling modifications based on the selected value.

HTML Structure

<input type="range" min="0" max="80" value="60" step="10" oninput="this.nextElementSibling.className = 'shape' + ' ' + 'shape' + this.value">

type="range": Defines a slider input element.
min="0": Sets the minimum value of the slider.
max="80": Sets the maximum value of the slider.
value="60": Sets the initial value of the slider when the page loads.
step="10": Defines the increments in which the slider moves.

- oninput event handler:

When the user interacts with the slider, it dynamically updates the class name of the next sibling element (the shape).
The new class name consists of "shape" followed by "shape" and the slider's value (e.g., "shape shape60").
This allows CSS rules targeting different .shapeXX classes to apply specific styles.

Functionality

As the slider moves, the shape’s class changes dynamically.
Different CSS rules can be applied based on the class name assigned to the shape.
Allows for real-time styling changes without requiring JavaScript beyond the inline event handler.

Below is the Html code:

<body>
    <h3>CSS Slider</h3>
    <div class="shape-container">
        <input type="range" min="0" max="80" value="60" step="10"
        oninput="this.nextElementSibling.className = 'shape' + ' ' + 'shape' + this.value">
        <div class="shape shape60"></div>
    </div>
</body>

Styling

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #607D8B;
    font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

h3{
  color: white;
  font-size: 30px;
  position: relative;
  font-weight: bold;
}

input[type="range"] {
    width: 300px;
    margin-top: 20px;
    appearance: none;
    background:#c6e6ff;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: -50px;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #d2739d;
    border-radius: 50%;
    cursor: pointer;
}

.shape-container {
    position: relative;
    top: 0px;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0px 5px 5px rgba(50, 50, 0, 0.5));
}

.shape {
    width: 100%;
    height: 100%;
    background: #ffeccb;
    transition: clip-path 0.3s ease-in-out;
}

.shape:before{
    position: absolute;
    left: 50%;
    top: 50%;
    color: #795548;
    transform: translate(-50%, -50%);
}

/* Defining shape transformations */
.shape0 {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
} /* Triangle */

.shape0:before{
    content: 'Triangle';
}

.shape10 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
} /* Square */

.shape10:before{
    content: 'Square';
}

.shape20 {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
} /* Pentagon */

.shape20:before{
    content: 'Pentagon';
}

.shape30 {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
} /* Hexagon */

.shape30:before{
    content: 'Hexagon';
}

.shape40 {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
} /* Heptagon  */

.shape40:before{
    content: 'Heptagon';
}

.shape50 {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
} /* Octagon */

.shape50:before{
    content: 'Octagon';
}

.shape60 {
    clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
} /* Nonagon  */

.shape60:before{
    content: 'Nonagon';
}

.shape70 {
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
} /* Decagon */

.shape70:before{
    content: 'Decagon';
}

.shape80 {
    clip-path: circle(50% at 50% 50%);
} /* Circle */

.shape80:before{
    content: 'Circle';
}

Output:

Thank you for making it this far. Please follow me on Instagram and Youtube for the latest and more detailed CSS updates!

Codepen Demo

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now