Html range slider with min and max | range slider html css – codewithrandom

Html range slider with min and max | range slider html css – codewithrandom

In this article, we will learn how to create a JavaScript Range Slider with a minimum and maximum value. 

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.

Live Project:

See the Pen Untitled by Ankit Joshi (@ankit9015) on CodePen.

Prerequisite:

This article requires a basic understanding of HTML, CSS, and a little bit of Javascript.

I’ll explain the project in a manner that makes it easy to follow even for complete beginners with a

basic understanding of the listed technologies.



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

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 minimum value, range input, and maximum value. For this input range I have used minimum = 0, maximum = 100 and a default value = 50. Steps attribute controls the change interval for an input value, here we are using steps=1 to change 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 field block, we are using display=flex to align its children elements horizontally. Also, we set the position=relative for 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 to 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 remover 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.


This Post Has One Comment

Leave a Reply