Re-position HTML5 video seekbar - javascript

I'm trying to create a mock page in HTML that plays a video in full screen in the background. I have a trasparent image that overlays the background video which mimics playing buttons and titles (all buttons are just an image and not real!).
Now I need to insert a real seekbar and scrubber to the video tag, with adjustable width and location as shown below. How can I do that?
Here is my simple code so far. The static image is HERE and the video is HERE.
video#backgroundvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>


Have you checked out? MDN: Video player styling basics?
Edit: Here is an example of a progress bar with your overlay. You may need to mess with element positioning, but you should properly nest/scope your elements.
const player = document.querySelector('.video-player');
const video = player.querySelector('video');
const progressBar = player.querySelector('.progress-bar');
video.addEventListener('timeupdate', updateProgressBar, false);
progressBar.addEventListener('click', seek);
function updateProgressBar() {
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
video.currentTime = percent * video.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
.video-player {
position: relative;
width: 66%;
height: 66%;
}
.video-player img {
width: 100%;
height: 100%;
}
.video-player video {
position: fixed;
top: 0;
left: 0;
min-width: 66%;
min-height: 66%;
width: auto;
height: auto;
z-index: -100;
background-repeat: no-repeat;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-player .controls .progress-bar {
position: absolute;
margin-left: 28%;
bottom: 10%;
color: orange;
font-size: 12px;
width: 40%;
height: 8%;
border: none;
background: #434343;
border-radius: 9px;
vertical-align: middle;
cursor: pointer;
}
.video-player .controls progress::-moz-progress-bar {
color: orange;
background: #434343;
}
.video-player .controls progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.video-player .controls progress[value]::-webkit-progress-value {
background-color: orange;
}
<div class="video-player">
<video preload="auto" autoplay loop id="backgroundvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt="">
<div class="controls">
<progress class="progress-bar" min="0" max="100" value="0">0% played</progress>
</div>
</div>
Here is an example with custom controls. It is a mirror of Rob Gravelle's HTML5 Video Player with Custom Controls. Most of the styles are defined in there.
Pay attention to the progress bar style.
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
// Get a handle to the player
const player = document.getElementById('video-element');
const btnPlayPause = document.getElementById('btnPlayPause');
const btnMute = document.getElementById('btnMute');
const progressBar = document.getElementById('progress-bar');
const volumeBar = document.getElementById('volume-bar');
// Update the video volume
volumeBar.addEventListener("change", function(evt) {
player.volume = evt.target.value;
});
document.getElementById('btnFullScreen').disabled = true;
// Add a listener for the timeupdate event so we can update the progress bar
player.addEventListener('timeupdate', updateProgressBar, false);
// Add a listener for the play and pause events so the buttons state can be updated
player.addEventListener('play', function() {
// Change the button to be a pause button
changeButtonType(btnPlayPause, 'pause');
}, false);
player.addEventListener('pause', function() {
// Change the button to be a play button
changeButtonType(btnPlayPause, 'play');
}, false);
player.addEventListener('volumechange', function(e) {
// Update the button to be mute/unmute
if (player.muted) changeButtonType(btnMute, 'unmute');
else changeButtonType(btnMute, 'mute');
}, false);
player.addEventListener('ended', function() {
this.pause();
}, false);
progressBar.addEventListener("click", seek);
function seek(e) {
let percent = e.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
e.target.value = Math.floor(percent / 100);
e.target.innerHTML = progressBar.value + '% played';
}
function playPauseVideo() {
if (player.paused || player.ended) {
// Change the button to a pause button
changeButtonType(btnPlayPause, 'pause');
player.play();
} else {
// Change the button to a play button
changeButtonType(btnPlayPause, 'play');
player.pause();
}
}
// Stop the current media from playing, and return it to the start position
function stopVideo() {
player.pause();
if (player.currentTime) player.currentTime = 0;
}
// Toggles the media player's mute and unmute status
function muteVolume() {
if (player.muted) {
// Change the button to a mute button
changeButtonType(btnMute, 'mute');
player.muted = false;
} else {
// Change the button to an unmute button
changeButtonType(btnMute, 'unmute');
player.muted = true;
}
}
// Replays the media currently loaded in the player
function replayVideo() {
resetPlayer();
player.play();
}
// Update the progress bar
function updateProgressBar() {
// Work out how much of the media has played via the duration and currentTime parameters
var percentage = Math.floor((100 / player.duration) * player.currentTime);
// Update the progress bar's value
progressBar.value = percentage;
// Update the progress bar's text (for browsers that don't support the progress element)
progressBar.innerHTML = percentage + '% played';
}
// Updates a button's title, innerHTML and CSS class
function changeButtonType(btn, value) {
btn.title = value;
btn.innerHTML = value;
btn.className = value;
}
function resetPlayer() {
progressBar.value = 0;
// Move the media back to the start
player.currentTime = 0;
// Set the play/pause button to 'play'
changeButtonType(btnPlayPause, 'play');
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
function toggleFullScreen() {
//var player = document.getElementById("player");
if (player.requestFullscreen)
if (document.fullScreenElement) {
document.cancelFullScreen();
} else {
player.requestFullscreen();
}
else if (player.msRequestFullscreen)
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
player.msRequestFullscreen();
}
else if (player.mozRequestFullScreen)
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
player.mozRequestFullScreen();
}
else if (player.webkitRequestFullscreen)
if (document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
} else {
player.webkitRequestFullscreen();
}
else {
alert("Fullscreen API is not supported");
}
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: lightgray;
}
p {
font-size: 0.9em;
}
h1 {
font-size: 16px;
color: #333;
}
#player {
float: left;
padding: 1em 1em .5em;
background-color: black;
border: 2px solid darkgreen;
border-radius: 9px;
}
#controls {
border: 1px solid darkgreen;
width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
padding-bottom: 3px;
border-radius: 7px;
}
video {
border: 1px solid darkgreen;
width: 420px;
height: 231px;
background: black;
}
button {
text-indent: -9999px;
width: 16px;
height: 16px;
border: none;
cursor: pointer;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
/* url('buttons.png') */
}
.pause {
background-position: -19px 0;
}
.stop {
background-position: -38px 0;
}
#volume-bar {
width: 50px;
vertical-align: middle;
padding: 0px;
}
.mute {
background-position: -95px 0;
}
.unmute {
background-position: -114px 0;
}
.replay {
background-position: -133px 0;
}
.fullscreen {
text-indent: 0px;
color: #00c600;
background-color: black;
background-image: none;
padding: 0px;
font-weight: bold;
padding-bottom: 3px;
}
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #276c30;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-moz-range-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 4.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #194620;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-fill-upper {
background: #205928;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
height: 4.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #205928;
}
input[type=range]:focus::-ms-fill-upper {
background: #276c30;
}
ground-color: lightgray;
}
p {
font-size: 0.9em;
}
h1 {
font-size: 16px;
color: #333;
}
#player {
float: left;
padding: 1em 1em .5em;
background-color: black;
border: 2px solid darkgreen;
border-radius: 9px;
}
#controls {
border: 1px solid darkgreen;
width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
padding-bottom: 3px;
border-radius: 7px;
}
video {
border: 1px solid darkgreen;
width: 420px;
height: 231px;
background: black;
}
button {
text-indent: -9999px;
width: 16px;
height: 16px;
border: none;
cursor: pointer;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0;
/* url('buttons.png') */
}
.pause {
background-position: -19px 0;
}
.stop {
background-position: -38px 0;
}
#volume-bar {
width: 50px;
vertical-align: middle;
padding: 0px;
}
.mute {
background-position: -95px 0;
}
.unmute {
background-position: -114px 0;
}
.replay {
background-position: -133px 0;
}
.fullscreen {
text-indent: 0px;
color: #00c600;
background-color: black;
background-image: none;
padding: 0px;
font-weight: bold;
padding-bottom: 3px;
}
progress {
color: green;
font-size: 12px;
width: 220px;
height: 16px;
border: none;
margin-right: 10px;
background: #434343;
border-radius: 9px;
vertical-align: middle;
}
progress::-moz-progress-bar {
color: green;
background: #434343;
}
progress[value]::-webkit-progress-bar {
background-color: #434343;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color: green;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #276c30;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4.4px;
cursor: pointer;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
background: #205928;
border-radius: 1px;
border: 1.1px solid #18d501;
}
input[type=range]::-moz-range-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 4.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #194620;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-fill-upper {
background: #205928;
border: 1.1px solid #18d501;
border-radius: 2px;
box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
}
input[type=range]::-ms-thumb {
box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;
border: 2.5px solid #83e584;
height: 18px;
width: 9px;
border-radius: 3px;
background: #439643;
cursor: pointer;
height: 4.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #205928;
}
input[type=range]:focus::-ms-fill-upper {
background: #276c30;
}
<h1>Custom HTML5 Video Player Demo</h1>
<div id='player'>
<video id='video-element'>
<source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
<source src='https://www.w3schools.com/html/mov_bbb.ogg' type='video/ogg'>
</video>
<div id='controls'>
<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
<button id='btnReplay' class='replay' title='replay' accesskey="R" onclick='replayVideo();'>Replay</button>
<button id='btnPlayPause' class='play' title='play' accesskey="P" onclick='playPauseVideo();'>Play</button>
<button id='btnStop' class='stop' title='stop' accesskey="X" onclick='stopVideo();'>Stop</button>
<input type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
<button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>
<button id='btnFullScreen' class='fullscreen' title='toggle full screen' accesskey="T" onclick='toggleFullScreen();'>[ ]</button>
</div>
</div>
<div style="clear:both"></div>
<p>Video courtesy of Big Buck Bunny.</p>
<p>Volume bar styled using range.css.</p>

Related

How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?

I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR

You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions

transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>

How can I solve the problem of my quiz project?

I've been working on this project for a while. I found the code from the Internet. I have never created a quiz game before. I edited the code a little. But unfortunately there are some problems with the code, which are difficult for me.
So far only digits are represented as questions. I want letters to be used for questions as well. The button to run the game, the limited reflection time and the score works. Unfortunately, if you press the right answer, the spear doesn't go on, but stops, but you get a point. I want that after a correct answer new questions are added and that the user gets a point. If the user presses the wrong answer, I want the game to stop and the scores achieved to be displayed.
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
hide('try');
show('correct');
setTimeout(function(){
hide('correct');
},1000);
genQA();
}else{
show('try');
hide('correct');
setTimeout(function(){
hide('try');
},1000);
}
}
}
}
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: none;
}
#correct
{
display: none;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct">Correct</div>
<div id="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>

I looked at your javascript code and i found some solutions .
This code will works for you . Its a little different : i corrected some errors .
I also added the classes for 'correct' and 'try' and modified the css file .
Here you are your corrected codes :
Javascript code:
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);
genQA();
}else{
document.getElementById('try').innerHTML="Try Again";
document.getElementById('correct').innerHTML="";
setTimeout(function(){
document.getElementById('try').innerHTML="";
},1000);
}
}
}
}
Css file :
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;
}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
Html Page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct" class="correct">Correct</div>
<div id="try" class="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
You only have to replace your files with this codes .
I hope it helps you ! :-)

How change range slider to show money?

I found this slider on codepen .
How do I get it to show me a minimum of € 500 and a maximum of € 6000 but to preserve the red background?
I have tried everything eg.
<input id = "range" type = "range" class = "range-slider" min = "500" max = "6000" step = "100">
But the range slider stretches to 6000% and I'm not good at JS.
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
rangeValueBar.style.setProperty('width', `${rangeSlider.value}%`);
rangeValue.innerHTML = `${rangeSlider.value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
width: 25px;
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>

I believe this is what you want, simply you can use min and max attributes for range slider form element, what I had to do is to remove width style in rangeValueHandler function.
I had to do the calculation for percentage for the width:
((input - min_value) *100)/ (max_value - min_value)}%
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
percentage = `${((rangeSlider.value - 500) * 100) / (6000 - 500)}%`;
rangeValueBar.style.setProperty('width', percentage);
rangeValue.innerHTML = `${rangeSlider.value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
max-width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
width: auto;
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
/*width: 100%;*/
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
/*width: 100%;*/
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
/*width: 100%;*/
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" min="500" max="6000" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>

Simply adapt the javascript that display the value:
function rangeValueHandler() {
rangeValueBar.style.setProperty('width', `${rangeSlider.value}%`);
const moneyValue = Math.round(500 + 5500 * rangeSlider.value * 0.01);
rangeValue.innerHTML = `\$ ${moneyValue}`;
}

you can set the limits min & max to any other value in this code its 500 & 6000
const rangeSlider = document.querySelector('.range-slider');
const rangeValueBar = document.querySelector('#range-value-bar');
const rangeValue = document.querySelector('#range-value');
let isDown = false;
function dragHandler() {
isDown = !isDown;
if (!isDown) {
rangeValue.style.setProperty('opacity', '1');
} else {
rangeValue.style.setProperty('opacity', '1');
}
}
function dragOn(e) {
if (!isDown) return;
rangeValueHandler();
}
function rangeValueHandler() {
min=500; max=6000;
rangeValueBar.style.setProperty('width',`${rangeSlider.value}%`);
value = Math.round(min + (max-min) * (rangeSlider.value/100));
rangeValue.innerHTML = `${value}€`;
}
rangeValueHandler();
rangeSlider.addEventListener('mousedown', dragHandler);
rangeSlider.addEventListener('mousemove', dragOn);
rangeSlider.addEventListener('mouseup', dragHandler);
rangeSlider.addEventListener('click', rangeValueHandler);
body {
padding: 100px;
}
.range-slider-container {
position: relative;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
position: absolute;
top: 0;
margin: 0;
}
#range-value-bar {
width: 100%;
content: "0";
background-color: #FC6E50;
position: absolute;
z-index: 10000;
height: 25px;
top: 0;
margin: 0;
border-radius: 5px;
}
/**/
#range-value {
content:"0";
background: rgba(233, 239, 244, 0.1);;
position: absolute;
z-index: 10000;
height: 25px;
top: -65px;
margin: 0;
border-radius: 5px;
left: 50%;
transform0: translateX(-50%);
font-size: 20px;
padding: 12px;
color: #41576B;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
text-align: center;
opacity: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 25px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #E9EFF4;
border-radius: 5px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
border: 14px solid #FFF;
height: 53px;
width: 53px;
border-radius: 30px;
background: #FC6E50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -13.5px;
position: relative;
z-index: 1000000000;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #000;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #000;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #000;
cursor: pointer;
}
<div class="range-slider-container">
<input id="range" type="range" class="range-slider">
<span id="range-value-bar"></span>
<span id="range-value">0</span>
</div>

Change text color onclick

I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>

I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>

Removing and Adding classes with button

I'm trying to use a button to remove the class .computer-off and add .computer-on and vice versa when clicked again. I've tried quite a few approaches, but to no avail. Here's one approach:
HTML:
<div id="computer-screen" class="computer-off">
<button onclick="computerPower()" class="power-button">Power</button>
</div>
JS:
function computerPower() {
if ( $("#computer-screen").hasClass('computer-off') ) {
document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
} else {
document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
}
};

I'd suggest, given that you appear to (be trying to) use jQuery:
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
Or, in plain JavaScript:
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
References:
JavaScript:
document.querySelector().
Element.classList.
jQuery:
toggleClass().

Categories