Range Slider With Min And Max Values Using HTML & CSS

In this article, we will learn how to create a Range Slider With Min And Max Values. We use HTML,CSS, And JavaScript In Range Slider.

Sliders are used in many user interfaces for a variety of reasons. It is an ideal input to define a range or strength of value, quantity, or any other characteristics. For instance: Price range, money, weight, temperature, frequency, etc.

To take user input from our slider we will use HTML's range input element. In HTML5 we can take several types of inputs such as e-mail, file, text, date, numbers, and many more.

A fundamental knowledge of HTML, CSS, and a little bit of Javascript are required for this article.

I'll provide a clear explanation of the project that even total beginners can understand.

Step 1: HTML structure

Create the boilerplate HTML and connect it with CSS and Javascript files.

Once done, let's look at the body element of our webpage. Here, we will create a structure for our
image slider cube.

HTML Code

First, we will create a wrapper block for our image slider.

<div class="wrapper-range">  
 </div>  

Next, we will style the wrapper and the body of the webpage. Here I am using a grid layout to center the slider wrapper.

CSS Style:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
html,
body {
    display: grid;
    height: 100%;
    text-align: center;
    place-items: center;
    background: #0492f1;
}
.wrapper-range {
    height: 80px;
    width: 380px;
    margin: 150px auto;
    background: #fff;
    border-radius: 10px;
    padding: 0 65px 0 45px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

Step 2: Create Range Slider with Input

Inside the range wrapper, we will create a field container to wrap the minimum value, range input, and maximum value. For this input range I have used minimum = 0, maximum = 100 and a default value = 50. The steps attribute controls the change interval for an input value, here we are using steps=1 to change the interval by 1 unit. You can change the values for these attributes however you want.

Moreover, we can also create a vertical slider by adding the attribute orient="vertical" inside the init element.

<div class="field">
    <div class="value left">0</div>
    <input type="range" min="0" max="100" value="50" steps="1" />
    <div class="value right">100</div>
</div>

CSS Style:

To style the field block, we are using display=flex to align its children elements horizontally. Also, we set the position=relative for the field block, to adjust the position of its children in relation to it.

field {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}
.field .value {
    position: absolute;
    font-size: 18px;
    color: #045fa4;
    font-weight: 600;
}
.field .value .left {
    left: -22px;
}
.field .value .right {
    right: -43px;
}
.field input {
    flex: 1 1 auto;
}

Next, we are styling the input range button (i.e., the circle that we drag to change the slider value). You can design it however you want, for this project I've designed it as a blue circle by keeping the width and height = 20px, and border-radius = 50%.

.range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    background: #045fa4;
    border: 1px solid #045fa4;
    cursor: pointer;
}
.range input::-moz-range-progress {
    background: #664AFF;
}

Step 3: Create a display to see the value of the range

Next, we will create a tooltip that displays the current value whenever someone uses the input slider. For this, we first create an HTML block with the default slider value (i.e. 50). 

Then we style our tooltip such that it remains on the top of the slider's input range button. We will use position= relative for the tooltip container and position= absolute for the span element, to move around in sync with the slider button, 

For the tooltip, we adjust its position relative to its parent container, and we use transform-origin = bottom to give its position control to its bottom. Also, use scale(0) to hide it initially and change it to scale(1) when we want the tooltip to appear.

<div
    class="sliderValue"
    > <span
    id="tootltip"
    > 50</span
    > </div
    > .sliderValue {
    position: relative;
    width: 100%;
}
.sliderValue span {
    position: absolute;
    height: 45px;
    width: 45px;
    transform: translateX(-70%) scale(0);
    font-weight: 500;
    top: -40px;
    line-height: 55px;
    z-index: 2;
    color: #fff;
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
}
.sliderValue span:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #045fa4;
    border: 3px solid #fff;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-bottom-left-radius: 50%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

Next, we style the tooltip for the case when it has a class 'show'. We will dynamically add this class to the tooltip using javascript.

.sliderValue span.show {
    transform: translateX(-70%) scale(1);
}

Step 4: Activate Range Slider with JavaScript

Now we will use Javascript to display the input range value around the slider, inside a tooltip. 

First, we will declare variables to hold the input slider and the range value.

const slideValue=document.querySelector("span");
const inputSlider=document.querySelector("input");

Next, we write a code to dynamically show the input value of the slider inside the tooltip. For this we first put the slider value inside a variable 'value', then we put the value in the tooltip. 

Then, we change the left property of the tooltip value to dynamically float over the slider button for different input values. 

Note: I've only used % after value because I am using max-value 100. If you choose a max-value greater than 100 (for instance 200), you'll need to make a few adjustments, such as:

slideValue.style.left = 0.5 * (value) + "%";

Finally, we add the class 'show' to the tooltip, which changes the transform scale from 0 to 1. Hence makes the tooltip value appear.

inputSlider.oninput = () => {
    let value = inputSlider.value;
    slideValue.textContent = value;
    slideValue.style.left = value + "%";
    slideValue.classList.add("show");
};

We only want our tooltip to appear when someone changes the value and then disappears. Hence we will write an on-blur event listener for the slider, that works when the slider loses focus. The on-blur event listener removed the class 'show' from the tooltip value, thus,

 making it disappear once again.

inputSlider.onblur = () => {
    slideValue.classList.remove("show");
};

All right friends, now the final step is to pat ourselves on our backs as we have created our Range Slider.

Thanks For Visiting >> Have a Nice Day!