<input type="range"> Lightsaber

Developer
Noah Blon
Size
2,556 Kb
Views
60,720
  1. <input type="range"> Lightsaber Previews
  2. <input type="range"> Lightsaber HTML Codes
  3. <input type="range"> Lightsaber CSS Codes
  4. <input type="range"> Lightsaber JS Codes

How do I make an <input type="range"> lightsaber?

What is a <input type="range"> lightsaber? How do you make a <input type="range"> lightsaber? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

<input type="range"> Lightsaber Previews
IQ Test

<input type="range"> Lightsaber - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title><input type="range"> Lightsaber</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id="lightsaber" type="range" value="100"> <script src="js/index.js"></script>
</body>
</html>

<input type="range"> Lightsaber - Script Codes CSS Codes

body { background: #000; height: 100vh; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
input { width: 400px; height: 80px; -webkit-appearance: none; padding-left: 135px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/lightsaber-hilt.png) 0 50% / 135px no-repeat; cursor: -webkit-grab; cursor: grab; overflow: hidden;
}
input:active { cursor: -webkit-grabbing; cursor: grabbing; }
input:focus { outline: none; }
::-webkit-slider-runnable-track { height: 80px; overflow: hidden;
}
::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: 30px; background: none; /* iOS */ border: none; /* iOS */ border-radius: 0 10px 10px 0; /* not the greatest, but pseudos stopped working on the thumb :( */ box-shadow: -20px 0 0 0 #E1FCD9, -30px 0 0 0 #E1FCD9, -40px 0 0 0 #E1FCD9, -50px 0 0 0 #E1FCD9, -60px 0 0 0 #E1FCD9, -70px 0 0 0 #E1FCD9, -80px 0 0 0 #E1FCD9, -90px 0 0 0 #E1FCD9, -100px 0 0 0 #E1FCD9, -110px 0 0 0 #E1FCD9, -120px 0 0 0 #E1FCD9, -130px 0 0 0 #E1FCD9, -140px 0 0 0 #E1FCD9, -150px 0 0 0 #E1FCD9, -160px 0 0 0 #E1FCD9, -170px 0 0 0 #E1FCD9, -180px 0 0 0 #E1FCD9, -190px 0 0 0 #E1FCD9, -200px 0 0 0 #E1FCD9, -210px 0 0 0 #E1FCD9, -220px 0 0 0 #E1FCD9, -230px 0 0 0 #E1FCD9, -240px 0 0 0 #E1FCD9, -250px 0 0 0 #E1FCD9, -260px 0 0 0 #E1FCD9, -270px 0 0 0 #E1FCD9, -280px 0 0 0 #E1FCD9, -290px 0 0 0 #E1FCD9, -300px 0 0 0 #E1FCD9, -310px 0 0 0 #E1FCD9, -320px 0 0 0 #E1FCD9, -330px 0 0 0 #E1FCD9, -340px 0 0 0 #E1FCD9, -350px 0 0 0 #E1FCD9, -360px 0 0 0 #E1FCD9, -370px 0 0 0 #E1FCD9, -380px 0 0 0 #E1FCD9;
}
::-webkit-slider-thumb:after { content: ''; background: #E1FCD9;
/* position: absolute; */
/* left: -400px; */ width: 400px; height: 15px; box-shadow: -20px 0 20px 0 #5DFC58; border-radius: 0 10px 10px 0; z-index: 10;
}
::-moz-range-track { height: 16px; background: #E1FCD9;
}
::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0 50% 50% 0; box-shadow: 200px 0 0 200px #000; border: none; background: #E1FCD9;
}
::-ms-track { background: #000; color: transparent; height: 16px; border: none; margin-top: 14px;
}
::-ms-thumb { background: #E1FCD9; height: 16px; width: 0; border: none; border-radius: 0 50% 50% 0;
}
::-ms-fill-lower { background: #E1FCD9; border-radius: 0 10px 10px 0; box-shadow: 0 0 20px #5DFC58;
}
::-ms-ticks-before,
::-ms-ticks-after,
::-ms-tooltip { display: none; }

<input type="range"> Lightsaber - Script Codes JS Codes

/* No JS needed for the styling */
var lightsaber = document.getElementById('lightsaber');
hum = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/Lightsaber_sound_effect_-_medium.mp3');
hum.loop = true;
function changeVolume () { hum.volume = lightsaber.value / 100;
}
lightsaber.addEventListener('input', changeVolume);
changeVolume();
hum.play();
<input type="range"> Lightsaber - Script Codes
<input type="range"> Lightsaber - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded June 24, 2022
Rating 4.5
Size 2,556 Kb
Views 60,720
Do you need developer help for <input type="range"> Lightsaber?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noah Blon (noahblon) Script Codes
Name
9 Pens
Cross-Browser Range Input With Solid Lower Fill
Carousel
Juggle
Free Radicals
An Intro to SVG Animation with SMIL - Example 1
Sass-managed SVG Background-Image icons
SVG Christmas Light Icon Animated with CSS
3D CSS Text with Perspective
Colored SVG background-image - Mask Method
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!