You are currently viewing Price Range Slider Using HTML , CSS & JavaScript

Price Range Slider Using HTML , CSS & JavaScript

Price Range Slider Using HTML , CSS & JavaScript

Hello, programmers! In this blog, we’ll use HTML, CSS, and Javascript to make a gradient price slider. This project is intended for total beginners, and it will teach us how to make a slider using some fundamental HTML ideas and how to apply gradient styling using CSS. We will add the price value using JavaScript.

Price Range Slider Using HTML , CSS & JavaScript
Price Range Slider Using HTML , CSS & JavaScript

The user can slide the metre on a price range slider to choose the proper pricing range. As you can see in the preview image, there is a price range slider in this project (Price Range Slider in JavaScript) that you can drag to increase or decrease its value.
We all know that managing a code is important while building a project so that it will be easy for the user to use that code in future as well . So we will follow the same method we will be creating the different file for creating our project.

  1. index.html -defines the element structure that would be displayed on the page through the HTML layout.
  2. style.css- includes styling CSS code. We may style the various parts with CSS to improve the visual appeal.
  3. Index.js – includes JavaScript programming.The javascript concepts will helps us in adding the sliding value to the slider.

Step1: Adding Some Basic HTML.

HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let’s look at our HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Price Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Price Slider</h1>
    <div>
        <span id="rangeValue">0</span>
        <Input type="range" name "" value="0" min="0" max="1000" onChange="rangeSlide(this.value)" 
onmousemove="rangeSlide(this.value)"></Input>
    </div>
    <script src="index.js"></script>
</body>
</html>

We have used the basic HTML concepts to add a price slider structure .
Before beginning to add structure to our price slider. We need to update some links. Because we utilised three distinct files for our HTML, CSS, and Javascript in this project, we need to link them all together. To do this, please include the links for our CSS and Javascript.

Weather App Using Html,Css And Javascript (Source Code )

<link rel="stylesheet" href="style.css" />  //Add this link into the head section of our HTML.
<script src="index.js"></script>   //Add this link inside the body just before the closing body tag of our HTML.

Some sliders function like a range slider or something similar, as you may have noticed. A price slider will be made in a similar manner.

  • Using the h1 heading tag we will add a heading to our price selector webpage.
  • Now we will create a div which will the container for our slider value and slider.
  • Now using the span tag with id (rangeValue) we set its value to be “zero”.
  • Now using the input type as “range ” we will add a slider to our webpage.

Now we have added a basic structure for our price slider webpage. Now let’s have a look at our price slider structure.

Output:

Price Range Slider Using HTML , CSS & JavaScript
Price Range Slider Using HTML Code Preview

Step2: Adding the CSS Code.

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.
Now we will look at our CSS code.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0d064c;
  background: linear-gradient(117deg,#0d064c 0,#740887 100%);
}
h1{
  color: white;
  margin-bottom: 200px;
  font-size:4rem;
}
div {
  position: absolute;
}
#rangeValue {
  position: relative;
  display: block;
  text-align: center;
  font-size: 6em;
  color: #999;
  font-weight: 400;
}
.range {
  width: 400px;
  height: 15px;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.
Step1:We’ll start by including a Google Font called Poppins with a 300 px font weight. The primary font family for our entire website will be this one.
Now that the padding and margin have been set to “zero,” the font family “Poppins” has been selected for our entire price slider webpage using the global selector.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

Step2: We will now style our HTML body by adding a body element to it. Its display was set to “flex.” We will justify content to the centre using the justify-content attribute. By combining the colours “dark blue” and “peach,” we will now build a linear gradient with an angle of 117 degrees using the background property.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0d064c;
  background: linear-gradient(117deg,#0d064c 0,#740887 100%);
}
Price Range Slider Using HTML,CSS &  JavaScript
Price Range Slider Using HTML,CSS Code Preview

Step3:  We will now style the webpage’s heading. We will give our header a white colour using the colour property. We will now give our heading a bottom margin of 200 pixels using the margin-bottom attribute. Our heading’s size is set to “4 rem” using the font-size property.
Additionally, we added additional design to our pricing slider container (div). We made its stance “absolute.”

h1{
  color: white;
  margin-bottom: 200px;
  font-size:4rem;
}
div {
  position: absolute;
}

Price Range Slider Using HTML,CSS &  JavaScript

Step4: Using the id selector (#rangeValue), we will style our rangeValue element. The display was set to “block,” and we will set its position to be relative. We will now add text-alignment as “centre” to our range value utilising the text-align property. For our range value, the font-size, font-color, and font-weight are all set to “6 em,” “grey,” and “400,” respectively.

How To Create OTP Input Field Using HTML , CSS & Javascript

#rangeValue {
  position: relative;
  display: block;
  text-align: center;
  font-size: 6em;
  color: #999;
  font-weight: 400;
}

Step5: Our range slider’s width and height are now set to “400px” and “15px,” respectively, using the class selector (.range). A black ground was also included to the range. We will give our range slider a little curvature by using a boundary radius of 15 pixels. Using the box shadow property, we also added a box shadow.

.range {
  width: 400px;
  height: 15px;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}

Let’s look at our output now that we have added all the styling to our OTP input webpage.

Output:

Price Range Slider Using HTML,CSS &  JavaScript
Price Range Slider Using HTML,CSS Code Final Preview 

Step3: Adding Javascript Code

function rangeSlide(value) {
  document.getElementById("rangeValue").innerHTML = value;
}

In javascript we have just used the simple javascript concept . Here first of all we have created a function called rangeSlider with a paramter (value) . Now inside the function using the document.getElementById we will select our rangeValue HTML we will insert the value of our slider into our rangevalue using the innerHTML method.
Now we created our own custom price slider using HTML ,CSS  & Javascript . Let’s take a look at the video output of our project.

Output:

A simple project that you create when still starting out as a web developer is a price slider. if you intend to apply this project in practise. The findings are displayed to the user, and I then advise employing this price slider in e-commerce websites, as most do nowadays. So the link below might be useful for you if you’re a beginner trying to build your own e-commerce website.

E-Commerce Website

All of that pertains to building our price slider. Therefore, I believe you have basic understanding of input & its types and how we use styling to create a visually appealig website. We appreciate you taking the time to read this.

Now We have Successfully created our price slider using HTML , CSS & Javascript . You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Arun

Leave a Reply