MAHARASHTRA STATE BOARD OF TECHNICAL

EDUCATION

SNJB’S SHRI HIRALAL HASTIMAL

(JAIN
BROTHER’S, JALGAON)
POLYTECHNIC CHANDWAD-423101
(NASHIK)

MICRO PROJECT
Academic year: 2024-63

TITLE OF PROJECT
Price Range Slider

Program:Computer Technology Program Code:CM

Course: Client Side Scripting Language Course code:

26319

1
 Teacher Evaluation Sheet
Name of Student: Borse Shubham Dattu
Enrolment No:2200790197
Name of Program: Computer Technology Semester:-V
Course Title: Client Side Scripting Language (CSS) Code: -26319
Title of the Micro Project: Price Range Slider

Course Outcomes Achieved:-

a: Create interactive web pages using program flow control structure.
c: Create event based web forms using Java script
f: Create Menus and navigations in web Pages.

Evaluation as per Suggested Rubric for Assessment of Micro-Project:

Sr.
Characteristic to be Poor Average Good Excellent
No.
assessed (Marks 1-3) (Marks 4-5) (Marks 6 - (Marks 9-10)
8)
(A) Process and Product Assesssment (Convert above total marks out of 6 marks)
1 Relevance to the Course
Literature Survey /
2 Information Collection
Completion of the Target as
3
per project proposal
Analysis of data and
4 representation
5 Quality of Prototype / Model
6 Report Preparation
(B) Individual Presentation / Viva (Convert above total marks out of 4 marks)
8 Presentation
9 Viva
Micro – Project Evaluation Sheet:
Process Assessment Product Assessment
Part
Part
A– Project Individual Total
B – Project
project Methodology Presentation / Marks
Report / Working
Name of Student Proposal (2 marks) Viva(4 marks) 10
Model(2 marks)
(2 marks
Borse Shubham Dattu
Comments / Suggestions about team work / leadership / inter – personal communication (if any)
Any Other Comment

Name and designation of the faculty Member: Mr. D. B. Signature

Zambare

2
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Sr.No. Name of Student Roll No Enrollment No Seat No

1. Borse Shubham Dattu 63 2200790197

CERTIFICATE
This is to certify, Borse Shubham Dattu

of 5th Semester of Diploma in Computer Technology of Institute, Shri H.H.J.B.

Polytechnic, Chandwad (Code: 0079) has completed the Micro-Project satisfactorily in
Subject Client Side Scripting Language (26319) for the academic year 2024-2063 as
prescribed in the curriculum.

Place: CHANDWAD

Date: /11 /2024

Course Teacher Head of the Department Principal

(Mr. D. B. Zambare) (Mr. P. R. Sali) (Dr. V. A. Wankhede)

Seal of
Institute

3
 INDEX

SR_NO. CONTENT PAGE NO.

Part A

1 Brief Introduction 5

2 Aim of Micro Project 5

3 Action Plan 5

4 Resources Required 5

Part B

1 Brief Description 6

2 Aim of Micro Project 6

3 Course Outcome Integrated 6

4 Actual Procedure Followed 6

5 Actual Resource Used 6-12

6 Outputs of the Micro-projects 13

7 Skill Developed 14

8 Applications of Microproject 14

4
 PART A-Plan

Title of micro-project: Price Range Slider

1. Aim/Benefits of the Micro-Project- Speed typing tests serve as effective tools to

assess your typing speed, benchmark your performance, and motivate you to
improve.

2. Course Outcomes Addressed-

a: Create interactive web pages using program flow control structure.
b: Implement Arrays and functions in Java script
c: Create event based web forms using Java
script d: Use JavaScript for handling cookies.
e: Create interactive webpage using regular expressions for validations
f: Create Menus and navigations in web Pages.

3. Proposed Methodology-
To create a Price Range Slider microproject, you can follow the steps outlined below.
This methodology provides a structured approach to develop the project:

Action Plan-
Sr Planned Start Planned Finish
Details of activity
no. Date Date
1. Finalization of topic 20/07/2024 63/07/2024
2. Preparation of Abstract 02/08/2024 08/08/2024
3. Collection of data 09/08/2024 30/08/2024
4. Preparation of concept 01/09/2024 63/10/2024
5. Seminar / Presentation 26/10/2024 30/10/2024
6. Submission of Micro Project 12/11/2024 18/11/2024

4. Resources Required:
Sr.No Name of Specification Quantity Remarks
Resource/Material
1. Computer I5,RAM 8GB -
(Desktop/Laptop)
1
2. Microsoft office 2010 -
1
word
3. Books 1 -
4. Websites Github.com 1 -
5. Softwares Notepad or -
1
vs, chrome

5
 PART B-Plan

Title of micro-project: Price Range Slider

1. Brief Description:
A price range slider is an interactive UI component that allows users to set a minimum
and maximum price range by adjusting one or two sliding handles along a scale. It is
commonly used in e-commerce websites or filtering systems to help users refine sear
Adjust Words per Minute (WPM - Errors).

2. Aims/Benefits of Micro Project:

A price range slider offers several benefits, especially in user interfaces where filtering by a numerical
range (e.g., prices) is required. Here are its key advantages:

1. Improves User Experience

2. Saves Time
3. Enhances Search Efficiency
4. Real-Time Feedback
5.

3. Course Outcomes Achieved:

a: Create interactive web pages using program flow control structure.
c: Create event based web forms using Java script
f: Create Menus and navigations in web Pages.

4. Actual Methodology/Procedure Followed:

1. Define Objectives and Scope

2. Select Development Tools and Languages
3. Design User Interface
4. Implement Price Range Slider Logic
5. Add Features to Enhance User Experience
6. Incorporate Feedback and Validation
7. Test and Debug
8. Add Optional Features
9. Gather Feedback and Iterate

5. Actual Resources Used:

Sr.No Name of Specification Quantity Remarks
Resource/Material
1. Computer i5,RAM 1 -
(Desktop/Laptop) 8GB
2. Microsoft office 2010 1 -
word
3. Books 1 -
4. Websites Github.com 1 -

6
5. Softwares Notepad or 1 -
vs code,
chrome

7
 HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>
Custom Price Range Slider--GFG
</title>
<link rel="stylesheet"
href="style.css">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
</head>

<body>
<div class="main">
<div class="gfg">
<p>GeeksForGeeks</p>
</div>
<div class="custom-wrapper">

<div class="header">
<h2 class="projtitle">
Price Range Slider
</h2>
</div>

<div class="price-input-container">
<div class="price-input">
<div class="price-field">
<span>Minimum Price</span>
<input type="number"
class="min-input"
value="2500">
</div>
<div class="price-field">
<span>Maximum Price</span>
<input type="number"
class="max-input"
value="8500">
</div>
</div>
<div class="slider-container">
<div class="price-slider">
</div>
</div>
</div>

8
 <!-- Slider -->
<div class="range-input">
<input type="range"
class="min-range"
min="0"
max="10000"
value="2500"
step="1">
<input type="range"
class="max-range"
min="0"
max="10000"
value="8500"
step="1">
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
CSS Code:
/* Style.css */
*{
margin: 0;
padding: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
}

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px
rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

.main:hover {
transform: scale(1.05);
}

.gfg {
display: flex;
align-items: center;
9
justify-content: center;
font-size: 24px;
font-weight: 600;
color: #01940b;
}

.custom-wrapper {
margin: 0;
width: 70%;
padding: 0px 25px 40px;
position: relative;
left: 63px;
}

.header h2 {
font-size: 30px;
color: #01940b;
display: flex;
justify-content: center;
padding: 20px;
}

/* Styles for the price input container */

.price-input-container {
width: 100%;
}

.price-input .price-field {
display: flex;
margin-bottom: 22px;
}

.price-field span {
margin-right: 10px;
margin-top: 6px;
font-size: 17px;
}

.price-field input {
flex: 1;
height: 35px;
font-size: 15px;
font-family: "DM Sans", sans-serif;
border-radius: 9px;
text-align: center;
border: 0px;
background: #e4e4e4;
}

.price-input {
width: 100%;
font-size: 19px;
color: #555;
}

/* Remove Arrows/Spinners */
10
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.slider-container {
width: 100%;
}

.slider-container {
height: 6px;
position: relative;
background: #e4e4e4;
border-radius: 5px;
}

.slider-container .price-slider {
height: 100%;
left: 25%;
right: 15%;
position: absolute;
border-radius: 5px;
background: #01940b;
}

.range-input {
position: relative;
}

.range-input input {
position: absolute;
width: 100%;
height: 5px;
background: none;
top: -5px;
pointer-events: none;
cursor: pointer;
-webkit-appearance: none;
}

/* Styles for the range thumb in WebKit browsers */

input[type="range"]::-webkit-slider-thumb {
height: 18px;
width: 18px;
border-radius: 70%;
background: #555;
pointer-events: auto;
-webkit-appearance: none;
}

@media screen and (max-width: 768px) {

.main {
width: 80%;
margin-right: 5px;
}
11
.custom-wrapper {
width: 100%;
left: 0;
padding: 0 10px;
}

.projtitle {
width: 100%;
position: relative;
right: 26px;
}

.price-input {
flex-direction: column;
align-items: center;
}

.price-field {
margin-bottom: 10px;
}
}

12
 JAVASCRIPT Code:
// Script.js
const rangevalue =
document.querySelector(".slider-container .price-slider");
const rangeInputvalue =
document.querySelectorAll(".range-input input");

// Set the price gap

let priceGap = 500;

// Adding event listners to price input elements

const priceInputvalue =
document.querySelectorAll(".price-input input");
for (let i = 0; i < priceInputvalue.length; i++) {
priceInputvalue[i].addEventListener("input", e => {

// Parse min and max values of the range input

let minp = parseInt(priceInputvalue[0].value);
let maxp = parseInt(priceInputvalue[1].value);
let diff = maxp - minp

if (minp < 0) {
alert("minimum price cannot be less than 0");
priceInputvalue[0].value = 0;
minp = 0;
}

// Validate the input values

if (maxp > 10000) {
alert("maximum price cannot be greater than 10000");
priceInputvalue[1].value = 10000;
maxp = 10000;
}

if (minp > maxp - priceGap) {

priceInputvalue[0].value = maxp - priceGap;
minp = maxp - priceGap;

if (minp < 0) {
priceInputvalue[0].value = 0;
minp = 0;
}
}

// Check if the price gap is met

// and max price is within the range
if (diff >= priceGap && maxp <= rangeInputvalue[1].max) {
if (e.target.className === "min-input") {
rangeInputvalue[0].value = minp;
let value1 = rangeInputvalue[0].max;
rangevalue.style.left = ${(minp / value1) * 100}%;
13
 }
else {
rangeInputvalue[1].value = maxp;
let value2 = rangeInputvalue[1].max;
rangevalue.style.right =
${100 - (maxp / value2) * 100}%;
}
}
});

// Add event listeners to range input elements

for (let i = 0; i < rangeInputvalue.length; i++) {
rangeInputvalue[i].addEventListener("input", e => {
let minVal =
parseInt(rangeInputvalue[0].value);
let maxVal =
parseInt(rangeInputvalue[1].value);

let diff = maxVal - minVal

// Check if the price gap is exceeded

if (diff < priceGap) {

// Check if the input is the min range input

if (e.target.className === "min-range") {
rangeInputvalue[0].value = maxVal - priceGap;
}
else {
rangeInputvalue[1].value = minVal + priceGap;
}
}
else {

// Update price inputs and range progress

priceInputvalue[0].value = minVal;
priceInputvalue[1].value = maxVal;
rangevalue.style.left =
${(minVal / rangeInputvalue[0].max) * 100}%;
rangevalue.style.right =
${100 - (maxVal / rangeInputvalue[1].max) * 100}%;
}
});
}
}

14
6.0 Output of the microproject :

15
6. Skill Developed:
Creating a simple price range slider involves just three key steps using basic HTML,
CSS, and JavaScript. This will help you quickly develop and understand the core
concepts without unnecessary complexity.

7. Applications of Microproject:
A price range slider has versatile applications across various industries and platforms. Below are
some key use cases:
1. E-Commerce Websites
2. Real Estate Platforms
3. Travel and Tourism
4. Financial Services
5. Food Delivery and Restaurants
6. Online Education Platforms

16