Skip to content

Commit 46b364f

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #54 from Atif0604/main
Added Custom-Range-Slider
2 parents c8e1868 + 5e87d47 commit 46b364f

File tree

5 files changed

+225
-0
lines changed

5 files changed

+225
-0
lines changed

‎Custom-Range-Slider/Custom-Range-Slider.png

22.2 KB
Loading

‎Custom-Range-Slider/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1>Custom Range Slider</h1>
2+
3+
<p>Simple Custom Range Slider written in HTML, CSS, and JavaScript .</p>
4+
5+
### Use of the Project:
6+
7+
<p>Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows to choose value from a range which is represented as a slider.</p>
8+
9+
10+
<h3>Used Technologies</h3>
11+
<ul>
12+
<li>HTML5</li>
13+
<li>CSS3</li>
14+
<li>JavaScript</li>
15+
</ul>
16+
17+
#### Steps to Use:
18+
19+
---
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Set the Range According to your wish
30+
31+
<h3> ScreenShots </h3>
32+
<img src="Custom-Range-Slider.png" alt="Sample Image"/>
33+
<br>

‎Custom-Range-Slider/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Custom Range Slider</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="slider-ui color1">
13+
<input type="range" min="0" max="100" step="1" />
14+
<div class="bar">
15+
<span class="min"></span>
16+
<span class="max"></span>
17+
</div>
18+
<div class="track">
19+
<div class="value"></div>
20+
</div>
21+
</div>
22+
23+
<div class="slider-ui color2">
24+
<input type="range" min="0" max="100" step="1" />
25+
<div class="bar">
26+
<span class="min"></span>
27+
<span class="max"></span>
28+
</div>
29+
<div class="track">
30+
<div class="value"></div>
31+
</div>
32+
</div>
33+
34+
<div class="slider-ui color3">
35+
<input type="range" min="0" max="100" step="1" />
36+
<div class="bar">
37+
<span class="min"></span>
38+
<span class="max"></span>
39+
</div>
40+
<div class="track">
41+
<div class="value"></div>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="footer">
46+
<h4>Designed & Developed with &#10084;&#65039; by Atif</h4>
47+
</div>
48+
<script src="./script.js"></script>
49+
</body>
50+
</html>

‎Custom-Range-Slider/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const sliders = document.querySelectorAll(".slider-ui");
2+
3+
sliders.forEach(slider => {
4+
let input = slider.querySelector("input[type=range]");
5+
let min = input.getAttribute("min");
6+
let max = input.getAttribute("max");
7+
let valueElem = slider.querySelector(".value");
8+
9+
slider.querySelector(".min").innerText = min;
10+
slider.querySelector(".max").innerText = max;
11+
12+
function setValueElem() {
13+
valueElem.innerText = input.value;
14+
let percent = (input.value - min) / (max - min) * 100;
15+
valueElem.style.left = percent + "%";
16+
}
17+
setValueElem();
18+
19+
input.addEventListener("input", setValueElem);
20+
input.addEventListener("mousedown", () => {
21+
valueElem.classList.add("up");
22+
});
23+
input.addEventListener("mouseup", () => {
24+
valueElem.classList.remove("up");
25+
});
26+
});

‎Custom-Range-Slider/style.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
height: 100vh;
5+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
background-color: #fff;
10+
}
11+
.slider-ui {
12+
position: relative;
13+
width: 500px;
14+
height: 50px;
15+
margin: 70px 0;
16+
}
17+
.slider-ui input {
18+
position: absolute;
19+
z-index: 10;
20+
top: 0;
21+
bottom: 0;
22+
width: 100%;
23+
cursor: pointer;
24+
opacity: 0;
25+
}
26+
.slider-ui .bar {
27+
position: absolute;
28+
z-index: 1;
29+
left: 0;
30+
right: 0;
31+
top: 0;
32+
bottom: 0;
33+
background-color: #000;
34+
border-radius: 50px;
35+
box-shadow: 0 5px 0 rgba(0,0,0,.1);
36+
}
37+
.slider-ui .min,
38+
.slider-ui .max {
39+
position: absolute;
40+
z-index: 2;
41+
top: 50%;
42+
transform: translateY(-50%);
43+
font-size: 14px;
44+
font-weight: 800;
45+
color: #fff;
46+
}
47+
.slider-ui .min {
48+
left: 2%;
49+
}
50+
.slider-ui .max {
51+
right: 2%;
52+
}
53+
.slider-ui .track {
54+
position: absolute;
55+
z-index: 3;
56+
left: 25px;
57+
right: 25px;
58+
top: 0;
59+
bottom: 0;
60+
}
61+
.slider-ui .value {
62+
position: absolute;
63+
left: 50%;
64+
top: 0;
65+
width: 50px;
66+
height: 50px;
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
font-size: 14px;
71+
font-weight: 800;
72+
color: #fff;
73+
background-color: #fff;
74+
border: 4px solid #000;
75+
border-radius: 100%;
76+
box-sizing: border-box;
77+
transform: translateX(-50%);
78+
transition: top .3s ease-in-out, color .3s ease-in-out;
79+
}
80+
.slider-ui .value.up {
81+
top: -110%;
82+
color: #000;
83+
}
84+
.slider-ui.color1 .bar {
85+
background-color: #00b894;
86+
}
87+
.slider-ui.color1 .value {
88+
border-color: #00b894;
89+
}
90+
.slider-ui.color2 .bar {
91+
background-color: #00cec9;
92+
}
93+
.slider-ui.color2 .value {
94+
border-color: #00cec9;
95+
}
96+
.slider-ui.color3 .bar {
97+
background-color: #0984e3;
98+
}
99+
.slider-ui.color3 .value {
100+
border-color: #0984e3;
101+
}
102+
103+
.footer{
104+
position: absolute;
105+
bottom: 0px;
106+
107+
padding: 0.4rem !important;margin: 10px;
108+
border-color: inherit;
109+
border-style: solid;
110+
border-width: 0;
111+
background-color: #212529 !important;
112+
}
113+
.footer h4{
114+
color: white;
115+
text-align: center;
116+
}

0 commit comments

Comments
 (0)