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.

HTML

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">
	    <span>0</span>
	    <span>100</span>
	    <span>200</span>
	    <span>300</span>
	    <span>400</span>
	    <span>500</span>
	    <span>600</span>
	</div>
    </div>
</div>

CSS

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.

body{
    background-color: #f4b927;
    padding: 0;
    margin: 0;
}
.container{
    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 
                rgba(194,142,10,0.3);
    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.

input[type="range"]{
    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.

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #1c1c1c;
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]:active::-webkit-slider-thumb{
    background-color:white;
    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.

.values{
    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.

.wrapper{
    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.

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

Javascript

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");
slider.oninput=function(){
    values.style.bottom=slider.value*40+"px";
}

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.