HomeJavascriptRange Slider With Rotating Values

Range Slider With Rotating Values

In previous tutorials, we have already explored how you can customize a range slider. Today let us take it a bit further and play around the design to create a sleek range slider with rotating values.


We start off by creating a div element. We assign it a class called ‘container’. Next, we need to create an input element. For today’s tutorial, we create an input element with a type called ‘range’. The range is used to collect numeric input between a specified range of values.

Now, we create a div with class name ‘values’. Inside this, we place seven span elements wrapped inside a div. Each of the span element contains a numeric value.

<div class="container">
    <input type="range" min="0" 
        max="6" value="0" id="slider">
    <div class="values">
        <div class="wrapper" id="wrapper">


Centering Container and its contents

We begin the styling by applying a white background color to the container. We assign it a width of 90vw i.e., 90% of the width of the viewport. Next, we center the container and apply a border-radius of 5 pixels. To give the container some depth, we add some box-shadow to it.
To center and space the elements inside the container, we use the flex layout.

    background-color: #f4b927;
    padding: 0;
    margin: 0;
    background-color: white;
    height: 60px;
    width: 90vw;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    padding: 0 10px;
    box-shadow: 0 0 25px 10px 
    display: flex;
    justify-content: space-around;
    align-items: center;
Customizing the range slider:

We hide the default appearance of the range slider using the ‘appearance’ attribute.

    width: 85%;
    height: 3.5px;
    -webkit-appearance: none;
    background-color: #dcdcdc;
    border-radius: 3px;
    outline: none;
customizing slider thumb:

To style the thumb of the slider, we use the ‘::-WebKit-slider-thumb
‘ pseudo-element. Similar to the range slider, we need to hide the default style of the slider thumb.

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #1c1c1c;
    cursor: pointer;
    border-radius: 50%;
    border: 5px solid #1c1c1c; 
Styling the Values Div:

We assign a width of 10% and a height of 40pixels to the ‘values’ div. We clip the content that is larger than the size of div by using the overflow property.

    width: 10%;
    height: 40px;
    position: relative;
    overflow: hidden;
Adding Transition Time:

To ensure a smooth rotation of values, we add a transition of 0.3 seconds to the ‘wrapper’ div.

    height: 100%;
    width: 100%;
    position: relative;
    transition: 0.3s;
Styling the span elements:

All the span elements have their height and width set the same as that of ‘values’ div. You can choose font-family, size, and color to customize the content of the span element.

    display: block;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins',sans-serif;
    font-size: 18px;


To process the input from the slider, we use javascript. We create a function that changes the style of ‘wrapper’ div each time the value of the slider changes.

var slider=document.getElementById("slider");
var values=document.getElementById("wrapper");

I hope you enjoyed this tutorial. You can now preview the output or download the source from below. To stay updated with the latest tutorials, subscribe us on Youtube.


Text Similarity Checker

Random Choice Picker

Anagram Checker



Please enter your comment!
Please enter your name here

2 × 3 =

Most Popular

Text Similarity Checker

Random Choice Picker

Anagram Checker

Custom Cursor