codemediaweb.com

Code Media

hire me

Custom CSS Range Slider with Labels

by
Custom CSS Range Slider with Labels

In this article, you will learn how to create Custom CSS Range Slider using HTML and CSS. Custom Range Slider helps to select a specific value in an input field.

Many types of inputs we get in HTML. I will add maximum and minimum values ​​in this slider. The user can choose any one of the values ​​in that range. Here I have determined the range from one to one hundred. The most important point is that there is a small display that will help to see the value of that range.

The value of the box will change when you change the position of that input slider. For this, you need to have an idea about basic HTML and CSS.

Custom Range Input Slider With Labels

In the following tutorial, you will learn how I created this project (Custom CSS Range Slider with Labels). First I designed the webpage and made a box on it. Range Slider was created using the first HTML in that box. As I said earlier, you can easily create a CSS Range Slider using the input function. 

From HTML we get different types of input functions like files, emails, passwords. With this, we have made a small display where the value of that range can be seen. Then I designed it with CSS and finally with the help of JavaScript. Very little JavaScript has been used here.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you to get a live feel of this project. To make it, you must have a basic idea about HTML CSS. First, you create an HTML and CSS file then follow the tutorial below.

Step 1: Create the basic structure of the CSS Range Slider

Using the HTML and CSS code below I designed the webpage and created a small box. I have created a slider and value box in this box.

<div class=”container”>
</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #3264fe;
}
.container{
    background-color: #ffffff;
    width: 90vmin;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30px 20px;
    border-radius: 5px;
}
Create the basic structure of the CSS Range Slider

Step 2: Create slider using HTML’s input tag

Now I have created the input function using HTML. Here 80% of the width of the slider has been used, that is, it can be seen in 80% of the space of that box.

<input type=”range” id=”my-slider” min=”0″ max=”100″ value=”50″ oninput=”slider()”>
input[type=”range”]{
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 80%;
    height: 8px;
    background-color: #d5d5d5;
    border-radius: 8px;
    outline: none;
}
input[type=”range”]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 8px;
}
Create slider using HTML's input tag

Step 3: Design the slider button

I have designed this Custom range input slider a little more using the following CSS. Here the size and color of the button have been added to control the rent.

input[type=”range”]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #3264fe;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    border: none;
}
input[type=”range”]:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}
Design the slider button

Step 4: Display the value of the Custom Range Slider

Now I have made a small box here. You can see the value of the slider in that box.

<div id=”slider-value”>0</div>
#slider-value{
    width: 13%;
    position: relative;
    background-color: #3264fe;
    color: #ffffff;
    text-align: center;
    font-family: “Roboto Mono”,monospace;
    padding: 10px 0;
    border-radius: 5px;
}
Display the value of the Custom Range Slider

Step 5: Activate CSS Range Sliders

Now I have activated this range slider with the help of JavaScript. First, the slider and the value box are set to a constant of id functions.

const mySlider = document.getElementById(“my-slider”);
const sliderValue = document.getElementById(“slider-value”);

Using one line JavaScript below I have arranged to show this slider in the value box. For this, I have taken the help of textContent. textContent helps to organize any information into web pages. So when you set a value in that range, that value can be found in that box.

function slider(){
    sliderValue.textContent = mySlider.value;
}
slider();
Activate CSS Range Sliders

Hope you learned from the tutorial how to create Custom CSS Range Slider with Labels using HTML CSS. Now you can use this design in any of your work. If you want the source code needed to create this project (How To Create Range Sliders), you can use the download button below.

Leave a comment