Range Slider - how to style on IE/Edge?

Range Slider - how to style on IE/Edge? - javascript

I'm trying to style this range slider on IE. It's been quite a nightmare. Anyone knows why fill color for the track doesn't work?
It's also not quite applying border-radius on the track.
&::-ms-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 8px;
background: $beige-yellow;
border-radius: 12px;
}
&::-ms-fill-lower {
height: 8px;
background: $army-green;
}
&::-ms-fill-upper {
background: $beige-yellow;
}
See full code here: https://codepen.io/anon/pen/PMQKdp

First, we should use input[type="range"] before the IE proprietary pseudo-elements to style the range slider in IE and Edge. So we should delete the .slider::-ms-track, .slider::-ms-fill-lower, .slider::-ms-thumb, .slider::-ms-tooltip part in CSS and write like below instead:
input[type="range"]::-ms-fill-lower {
...
}
input[type="range"]::-ms-fill-upper {
...
}
input[type="range"]::-ms-track {
...
}
input[type="range"]::-ms-thumb {
...
}
input[type="range"]::-ms-tooltip {
...
}
Second, the => arrow function in JavaScript is not supported in IE. You could use the Babel's translation to make it compatible with IE.
So the final code is like this:
var _R = document.querySelector('[type=range]');
_R.style.setProperty('--val', +_R.value);
_R.style.setProperty('--max', +_R.max);
_R.style.setProperty('--min', +_R.min);
document.documentElement.classList.add('js');
_R.addEventListener('input', function(e) {
_R.style.setProperty('--val', +_R.value);
}, false);
input:focus {
outline: none;
}
.slider {
-webkit-appearance: none;
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--val) - var(--min))/var(--range));
--sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));
margin: 0;
padding: 0;
width: 100%;
height: 1.5em;
background: transparent;
font: 1em/1 arial, sans-serif;
border: none;
}
.slider,
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.5em;
background: #ccc;
}
.js .slider::-webkit-slider-runnable-track {
background: linear-gradient(#7b1c1a, #7b1c1a) 0/var(--sx) 100% no-repeat #ccc;
}
.slider::-moz-range-track {
box-sizing: border-box;
border: none;
height: 0.5em;
background: #ccc;
}
.slider::-moz-range-progress {
height: 0.5em;
background: #7b1c1a;
}
.slider::-webkit-slider-thumb {
position: relative;
z-index: 99;
margin-top: -0.550em;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
.slider::-moz-range-thumb {
position: relative;
z-index: 99;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
#tickmarks {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
#tickmarks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 4px;
height: 4px;
background: green;
color: green;
border-radius: 100%;
line-height: 54px;
top: -34px;
left: 3px;
z-index: 0;
}
input[type="range"]::-ms-fill-lower {
background: #7b1c1a;
}
input[type="range"]::-ms-fill-upper {
background: transparent;
}
input[type="range"]::-ms-track {
height: 7px;
border: 1px solid #bdc3c7;
background-color: #ccc;
}
input[type="range"]::-ms-thumb {
position: relative;
z-index: 99;
margin-top: 0;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
input[type="range"]::-ms-tooltip {
display: none;
}
<div class="slidecontainer">
<input type="range" min="5" max="20" value="10" step='2.5' class="slider" id="myRange" list='tickmarks'>
<div id="tickmarks">
<p>5</p>
<p>7.5</p>
<p>10</p>
<p>12.5</p>
<p>15</p>
<p>17.5</p>
<p>20</p>
</div>
</div>
Besides, here's a very useful article about styling range slider across multiple browsers, you could also check it.

Related

How to animate movement with css

I have code that moves a circle around the screen. My goal is to reduce the amount of code with css animation. But I don't understand how to do it. There is a problem that I cannot solve if I use css animation. The circle goes beyond the screen, although I have code to prevent this. Help please
I have JS code as well as html and css. Also, my js code helps with opening the popup.
let elem = document.querySelector('.button');
function check() {
const popup = document.getElementsByClassName('popup');
if (document.getElementById('popup__input').checked = true) {
for (var i = 0; i < popup.length; i += 1) {
popup[i].style.display = 'block';
}
} else {
popup.style.display = "none";
}
}
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.top = randXP;
elem.style.left = randYP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
input[type=text],
select {
width: 100%;
max-width: 758px;
height: 60px;
padding: 12px 20px;
margin: 40px 0;
font-size: 60px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
form {
position: absolute;
display: flex;
justify-content: center;
}
.form__input {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 45px;
padding-right: 45px;
}
.close__button {
width: 0px;
position: absolute;
display: flex;
justify-content: end;
align-items: start;
height: 0px;
cursor: pointer;
border: none;
outline: none;
font-size: 2rem;
font-weight: bold;
background-color: rgb(208, 201, 201);
}
.form__button {
width: 550px;
height: 55px;
margin-top: 110px;
position: absolute;
font-size: 40px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
border: 1px solid #000;
border-radius: 10px;
width: 850px;
height: 200px;
background: rgb(208, 201, 201);
justify-content: end;
align-items: end;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#media (max-width: 1024.98px) {
.button {
width: 80px;
height: 80px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
}
#media (max-width: 890px) {
.popup {
width: 750px;
}
}
#media (max-width: 768.98px) {
input[type=text],
select {
width: 500px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 350px;
height: 45px;
margin-top: 105px;
position: absolute;
font-size: 30px;
}
.popup {
width: 600px;
}
}
#media (max-width: 620.98px) {
.popup {
width: 480px;
}
input[type=text],
select {
width: 395px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.close__button {
margin-left: 10px;
}
.form__input {
padding-left: 0px;
padding-right: 0px;
}
form {
margin-left: 10%;
}
}
#media (max-width: 507.98px) {
input[type=text],
select {
width: 280px;
height: 40px;
padding: 12px 20px;
margin: 45px 0;
font-size: 25px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 240px;
height: 35px;
margin-top: 95px;
position: absolute;
font-size: 20px;
}
.popup {
width: 360px;
}
}
#media (max-width: 400.98px) {
input[type=text],
select {
width: 290px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 200px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 360px;
height: 150px;
}
}
#media (max-width: 358.98px) {
input[type=text],
select {
width: 230px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 180px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 290px;
height: 150px;
}
}
#media (max-width: 300.98px) {
input[type=text],
select {
width: 200px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 140px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 255px;
height: 150px;
}
}
<main>
<div class="button">
<input onclick="check()" type="checkbox" name="popup__input" id="popup__input" class="popup__check">
</div>
<div class="popup" name="popup" id="popup">
<label class="popup__label">
<form>
<div class="form__input">
<input type="text" id="fname" name="fname"><br><br>
</div>
<div class="close-button__container">
<button class="close__button">×</button>
</div>
<button class="form__button" type="submit" form="nameform" value="Submit">Відправити</button>
</form>
</label>
</div>
<div class="overlay">
</div>
</main>

Since #Cerbus wrote, there is no way to generate random numbers with CSS. Only SCSS can create a random number on the initial build of the CSS file. You could write a keyframe animation in CSS with many steps and random positions.
You could generate these steps with JS :).

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

How to make mobile responsive vertical range slider

I have done a range slider position into vertical. but it's not responsive. I'm checked in chrome default mobile devices. when adjusting the range slider it will scroll the page
I have added my code here.
.slido{
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Using just transform on an element does not affect the size or position of its parent or of any other elements, at all. There is absolutely no way to change this fact of how transform works. so adding the div on parent level (which can handle the overflow of rotation) is one solution.
code Updated:
.slido {
-webkit-appearance: none;
width: 100vh;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.rotation-wrapper-outer {
display: table;
}
.rotation-wrapper-inner {
padding: 50% 0;
height: 0;
}
.element-to-rotate {
display: block;
transform-origin: top left;
/* Note: for a CLOCKWISE rotation, use the commented-out
transform instead of this one. */
transform: rotate(-90deg) translate(-100%);
/* transform: rotate(90deg) translate(0, -100%); */
margin-top: -50%;
/* Not vital, but possibly a good idea if the element you're rotating contains
text and you want a single long vertical line of text and the pre-rotation
width of your element is small enough that the text wraps: */
white-space: nowrap;
}
<div id="container">
<div class="rotation-wrapper-outer">
<div class="rotation-wrapper-inner">
<input type="range" class="slido" min="1" max="100" step="1">
</div>
</div>
</div>

You have transform the horizontal slider in to vertical which won't work so you can use vertical slider only check snippet.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #3D3D4A;
color: white;
font-family: sans-serif;
}
.info {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.5;
}
.container {
position: relative;
display: inline-block;
padding-top: 40px;
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) '%';
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3D3D4A;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: calc(100vh - 50px);
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="range-slider">
<input type="range" orient="vertical" min="0" max="100" />
<div class="range-slider__bar"></div>
<div class="range-slider__thumb"></div>
</div>
</div>

range slider thumb css issue in IE and Edge

I am creating a range slider for my site which needs to look same on all browser. I am having an issue with slider thumb size in IE and Edge now. I am unable to increase the height of thumb more than the slider track
Chrome and Firefox:
IE and Edge:
Code:
<input type="range" min="1" max="100" step="1" value="15">
CSS:
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
outline:none !important;
border-radius: 6px;
height: 8px;
width:100%;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor:pointer;
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
transition:100ms;
}
input[type='range']:hover::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor:pointer;
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius:50%;
}
/*Firefox */
input[type="range"]::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
cursor:pointer;
}
input[type="range"]:hover::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius:50%;
cursor:pointer;
}
input[type=range]::-moz-range-track {
background:none;
}
/*IE and Edge */
input[type=range]::-ms-thumb{
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius:50%;
cursor: hand;
}
input[type=range]::-ms-fill-upper {
background-color: #C5C5C5;
}
input[type=range]::-ms-fill-lower {
background-color: orange;
}
input[type=range]::-ms-track {
border:none;
color:transparent;
height:8px;
}
input[type="range"]::-ms-tooltip {
display: none; /*tooltip makes thumb sliding lagy*/
}
Jquery:
$('input[type="range"]').on('input change',function(){
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', orange), '
+ 'color-stop(' + val + ', #C5C5C5)'
+ ')'
);
});
After going through the link http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html found that IE won't let the thumb overflow the track. But there is a workaround mentioned in it.
I am able to make that change after adjusting the input[type="range"] height. But that changing the format in chrome and firefox.
Is there anyway to to resolve it.
Fiddle:
https://jsfiddle.net/anoopcr/ssbx0anj/55/

The code below shows a cross-browser slider that is working on Edge as well:
.wrap {
float: left;
position: relative;
margin: 0 0.5em 0.5em;
padding: 0.5em;
height: 12.5em;
width: 1.5em;
}
[type='range'] {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
width: 12.5em;
height: 1.5em;
transform: translate(-50%, -50%) rotate(-90deg);
background: transparent;
font: 1em arial, sans-serif;
}
[type='range'], [type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
[type='range']::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-moz-range-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-ms-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.25em;
background: #ccc;
}
[type='range']::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
[type='range']::-moz-range-thumb {
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
[type='range']::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #f90;
}
<div class='wrap'>
<input type='range' value="5" min="0" max="10"/>
</div>
Credits goes to Ana Tudor for the Original code pen:
[Codepen](https://codepen.io/thebabydino/pen/WdeYMd)

Input boxes don't have a "hitbox" and appear in front of the text

I'm having issues creating my auto-completing/auto-suggesting input box.
This is how it's currently working: https://i.imgur.com/2RzI3il.gifv
And here's a code snippet, bare in mind, the react code isn't included. The functionality isn't important, just the CSS layout.
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
#main{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div>
from:
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
</div>
<div>
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I want it to be displayed like this: https://i.imgur.com/qFFn5Gu.png
However, it is being displayed like this: https://i.imgur.com/irU05Yh.png
When I use Chrome's inspect tool, I find that the elements have these weird "hitboxes": https://i.imgur.com/b923Dzp.gifv
though that might not be relevant? I've tried to fix this and I just suck at CSS too much :p

There are multiple ways to work this out, here is one of them:
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.input-contianer {
position: relative;
text-align: left;
}
label {
display: inline-block;
margin-top: 5px;
}
#main{
position: absolute;
top: 0;
left: 60px;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 60px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="input-contianer">
<label>
from:
</label>
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I kept the two inputs absolute positioned, but wrapped them in a .input-container div that has a relative position (so the absolute will be absolute to the relative container).
I added a <label> element that will wrap the from:, this way you can position that label.

You should set a wrapping div with a relative position and play with the left position of the inputs
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.container{
position:relative;
}
.label{
position: absolute;
padding: 5px;
}
#main {
position: absolute;
top: 0;
left: 50px;
z-index: 1;
background: transparent;
}
#autocomplete {
position: absolute;
top: 0;
left: 50px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="container">
<div class="label">from:</div>
<input type="text" id="main" class="LocationInput-Input-Valid" value="Thórshavn">
<input type="text" id="autocomplete" class="LocationInput-Input" value="Thórshavn" disabled="">
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Range Slider - how to style on IE/Edge? - javascript

Related

How to animate movement with css

Links in footer wont display inline

How to make mobile responsive vertical range slider

range slider thumb css issue in IE and Edge

Input boxes don't have a "hitbox" and appear in front of the text

Categories

Resources