diff --git a/100_projects/81-emoji-range-slider/emojis/emoji-1.png b/100_projects/81-emoji-range-slider/emojis/emoji-1.png
new file mode 100644
index 0000000..de1a9a0
Binary files /dev/null and b/100_projects/81-emoji-range-slider/emojis/emoji-1.png differ
diff --git a/100_projects/81-emoji-range-slider/emojis/emoji-2.png b/100_projects/81-emoji-range-slider/emojis/emoji-2.png
new file mode 100644
index 0000000..0e986ca
Binary files /dev/null and b/100_projects/81-emoji-range-slider/emojis/emoji-2.png differ
diff --git a/100_projects/81-emoji-range-slider/emojis/emoji-3.png b/100_projects/81-emoji-range-slider/emojis/emoji-3.png
new file mode 100644
index 0000000..97071f8
Binary files /dev/null and b/100_projects/81-emoji-range-slider/emojis/emoji-3.png differ
diff --git a/100_projects/81-emoji-range-slider/emojis/emoji-4.png b/100_projects/81-emoji-range-slider/emojis/emoji-4.png
new file mode 100644
index 0000000..c0af369
Binary files /dev/null and b/100_projects/81-emoji-range-slider/emojis/emoji-4.png differ
diff --git a/100_projects/81-emoji-range-slider/emojis/emoji-5.png b/100_projects/81-emoji-range-slider/emojis/emoji-5.png
new file mode 100644
index 0000000..4b847d4
Binary files /dev/null and b/100_projects/81-emoji-range-slider/emojis/emoji-5.png differ
diff --git a/100_projects/81-emoji-range-slider/index.html b/100_projects/81-emoji-range-slider/index.html
new file mode 100644
index 0000000..9b8bf10
--- /dev/null
+++ b/100_projects/81-emoji-range-slider/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
diff --git a/100_projects/81-emoji-range-slider/main.js b/100_projects/81-emoji-range-slider/main.js
new file mode 100644
index 0000000..8b3b61d
--- /dev/null
+++ b/100_projects/81-emoji-range-slider/main.js
@@ -0,0 +1,34 @@
+const body = document.querySelector("body");
+const emoji = document.querySelector(".slide-emoji");
+const input = document.querySelector("input");
+const bar = document.querySelector(".progress-bar");
+const thumb = document.querySelector(".thumb");
+input.oninput = ()=>{
+ let sliderValue = input.value;
+ thumb.style.left = sliderValue + '%';
+ bar.style.width = sliderValue + '%';
+ if(sliderValue < 20){
+ emoji.style.marginTop = "0px";
+ body.classList.add("angry");
+ body.classList.remove("confuse");
+ body.classList.remove("like");
+ }
+ if(sliderValue >= 20){
+ emoji.style.marginTop = "-140px";
+ body.classList.add("confuse");
+ body.classList.remove("angry");
+ body.classList.remove("like");
+ }
+ if(sliderValue >= 40){
+ emoji.style.marginTop = "-280px";
+ }
+ if(sliderValue >= 60){
+ emoji.style.marginTop = "-420px";
+ body.classList.add("like");
+ body.classList.remove("confuse");
+ body.classList.remove("angry");
+ }
+ if(sliderValue >= 80){
+ emoji.style.marginTop = "-560px";
+ }
+}
\ No newline at end of file
diff --git a/100_projects/81-emoji-range-slider/style.css b/100_projects/81-emoji-range-slider/style.css
new file mode 100644
index 0000000..813b496
--- /dev/null
+++ b/100_projects/81-emoji-range-slider/style.css
@@ -0,0 +1,134 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+body{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(#FD8D58, #DC611E);
+ padding: 20px;
+ transition: all 0.3s ease;
+}
+body.angry{
+ background: linear-gradient(#FD8D58, #DC611E);
+}
+body.confuse{
+ background: linear-gradient(#FEA954, #DA7315);
+}
+body.like{
+ background: linear-gradient(#FED151, #DE981F);
+}
+.wrapper{
+ background: #f6f6f6;
+ padding: 30px 40px 40px;
+ border-radius: 10px;
+ max-width: 350px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
+}
+.wrapper .section{
+ height: 140px;
+ width: 140px;
+ overflow: hidden;
+}
+.wrapper .section .emojis{
+ height: 500%;
+ display: flex;
+ flex-direction: column;
+}
+.wrapper .section li{
+ height: 20%;
+ width: 100%;
+ list-style: none;
+ transition: all 0.3s ease;
+}
+.section li img{
+ height: 100%;
+ width: 100%;
+}
+.wrapper .slider{
+ margin-top: 40px;
+ height: 12px;
+ width: 100%;
+ position: relative;
+ background: #d9d9d9;
+ border-radius: 50px;
+}
+.slider input{
+ height: 100%;
+ width: 100%;
+ -webkit-appearance: none;
+ position: absolute;
+ background: none;
+ outline: none;
+ top: 0;
+ z-index: 2;
+}
+.slider input::-webkit-slider-thumb{
+ -webkit-appearance: none;
+ height: 20px;
+ width: 20px;
+ background: none;
+ cursor: pointer;
+}
+.slider .progress-bar{
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(45deg,#FD8D58, #DC611E);
+ border-radius: 50px;
+ position: relative;
+}
+body.angry .progress-bar{
+ background: linear-gradient(45deg,#FD8D58, #DC611E);
+}
+body.confuse .progress-bar{
+ background: linear-gradient(45deg,#FEA954, #DA7315);
+}
+body.like .progress-bar{
+ background: linear-gradient(45deg,#FED151, #DE981F);
+}
+.slider .thumb{
+ height: 25px;
+ width: 25px;
+ background: #DC611E;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translate(-50%, -50%);
+ z-index: 1;
+ padding: 2px;
+}
+body.angry .thumb{
+ background: #DC611E;
+}
+body.confuse .thumb{
+ background: #DA7315;
+}
+body.like .thumb{
+ background: #DE981F;
+}
+.slider .thumb span{
+ height: 100%;
+ width: 100%;
+ border: 2px solid #f6f6f6;
+ border-radius: 50%;
+ background: linear-gradient(#FD8D58, #DC611E);
+ display: block;
+}
+body.angry .thumb span{
+ background: linear-gradient(#FD8D58, #DC611E);
+}
+body.confuse .thumb span{
+ background: linear-gradient(#FEA954, #DA7315);
+}
+body.like .thumb span{
+ background: linear-gradient(#FED151, #DE981F);
+}
\ No newline at end of file
+ 
+ 
+ 
+