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.

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.

RELATED ARTICLES

Text Similarity Checker

Random Choice Picker

Anagram Checker

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

2 × 3 =

Most Popular

Text Similarity Checker

Random Choice Picker

Anagram Checker

Custom Cursor