I am creating a multi range slider, using 2 slider and making them go on top of each other.
I have successfully created it and supported it in Chrome and Mozilla, but I cant seem to support Edge.
The styling is in SCSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style lang="scss">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.item-value {
display: flex;
position: relative;
width: 100%;
height: 20px;
display: flex;
align-items: center;
&::before {
content: '';
height: 5px;
background: #000;
width: 100%;
background: #ddd;
border-radius: 3px;
}
.min-range, .max-range {
height: 25px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
pointer-events: none; // Prevent mouse interaction on the range slider.
position: absolute;
/* For Webkit Browsers (Chrome) */
&::-webkit-slider-runnable-track {
cursor: default;
height: 5px;
outline: 0;
appearance: none;
background: #ddd;
border-radius: 3px;
position: relative;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -10px;
position: absolute;
z-index: 10;
cursor: pointer;
}
/* For Mozilla Browsers */
&::-moz-range-track {
opacity: 0;
pointer-events: none;
}
&::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -5px;
position: absolute;
z-index: 10;
cursor: pointer;
border: 0;
}
/* For Edge Browsers */
&::-ms-track {
pointer-events: all;
}
&::-ms-thumb {
border: none;
height: 25px;
width: 25px;
border-radius: 50%;
background: $red;
pointer-events: all;
}
&::-ms-tooltip {
display: none;
pointer-events: all;
}
}
}
}
</style>
</head>
<body>
<section class="item-value">
<input type="range" value="10" class="min-range">
<input type="range" value="10" class="max-range">
</section>
</body>
</html>
In the &::-ms-thumb {}, the pointer-events: all; does not work,
I expect it to re-enable pointer events so the handles can be used again, which happens with &::-webkit-slider-thumb {} and &::-moz-range-thumb {}
Adding the same html and css code to make it runnable here
<!DOCTYPE html>
<html lang="en">
<head>
<style lang="scss">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.item-value {
display: flex;
position: relative;
width: 100%;
height: 20px;
display: flex;
align-items: center;
&::before {
content: '';
height: 5px;
background: #000;
width: 100%;
background: #ddd;
border-radius: 3px;
}
.min-range, .max-range {
height: 25px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
pointer-events: none; // Prevent mouse interaction on the range slider.
position: absolute;
/* For Webkit Browsers (Chrome) */
&::-webkit-slider-runnable-track {
cursor: default;
height: 5px;
outline: 0;
appearance: none;
background: #ddd;
border-radius: 3px;
position: relative;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -10px;
position: absolute;
z-index: 10;
cursor: pointer;
}
/* For Mozilla Browsers */
&::-moz-range-track {
opacity: 0;
pointer-events: none;
}
&::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -5px;
position: absolute;
z-index: 10;
cursor: pointer;
border: 0;
}
/* For Edge Browsers */
&::-ms-track {
pointer-events: all;
}
&::-ms-thumb {
border: none;
height: 25px;
width: 25px;
border-radius: 50%;
background: $red;
pointer-events: all;
}
&::-ms-tooltip {
display: none;
pointer-events: all;
}
}
}
}
</style>
</head>
<body>
<section class="item-value">
<input type="range" value="10" class="min-range">
<input type="range" value="10" class="max-range">
</section>
</body>
</html>
Related
I ma trying to style input range and progress. The issue is they are not aligned on top of each other. I dont want to use margin-top on -webkit-slider-runnable-track because I found it doesnt work in some cases (depending on where parent element is positioned).
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
}
.load-level {
position: absolute;
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 50px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}
<div class="seekbar-wrap">
<progress class="load-level" min="0" max="100" role="progressbar" value="44.11733725" aria-hidden="true">% buffered</progress>
<input class="input-progress" type="range" min="0" max="100" step="0.01" autocomplete="off" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="235" aria-valuenow="17.052851513822205" value="0" aria-valuetext="00:01 of 00:20" style="user-select: none; touch-action: manipulation;">
</div>
I don't know if I fully understood what you mean, but maybe this CSS code could help:
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
display:flex;
}
.load-level {
/* position: absolute; */
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}
I have been working on a custom-styled checkbox, but for some reason, the square when the toggle is checked is getting lost.
Anyone could please point out what I did wrong with this checkbox?
https://jsfiddle.net/d67k5uyq/6/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I believe is something to do with the before and after where I'm forgetting to set some value.
CSS
body{
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container{
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle{
display: none;
}
input[type=checkbox].toggle + label{
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size:20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle + label:before{
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle + label:after{
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
}
input[type=checkbox].toggle:not(:checked) + label{
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked) + label:after{
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked) + label:before{
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked + label{
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked + label:after{
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:checked + label:before{
left: 144px;
border-color: yellow;
}
When the input is unchecked then the before pseudo element is given a background color of white.
When it is checked then it is given a color to the border, but the border has not been given any width.
Assuming you want a yellow bordered square the this snippet not only sets the border color but also solid and 1px width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
<style>
body {
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container {
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle {
display: none;
}
input[type=checkbox].toggle+label {
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size: 20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle+label::before {
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle+label::after {
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
content: 'A';
}
input[type=checkbox].toggle:not(:checked)+label {
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked)+label::after {
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked)+label::before {
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked+label {
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked+label::after {
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 0.5;
color: white;
}
input[type=checkbox].toggle:checked+label::before {
left: 144px;
border-color: yellow;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I need to make this Range slider responsive. Text is getting overlapped when i start using in mobile version. Please help me to achieve this.
I have tried to add it in Table responsive and adding some responsive divs but still it didn't workout.
It would be great if someone help me to find out the way to make it responsive. You can see executable code in
#import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
#import url("https://fonts.googleapis.com/css?family=Dancing+Script");
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.label-slider:nth-child(1) {
padding-left: 0px;
}
.label-slider:nth-child(2) {
padding-left: 18px;
}
.label-slider:nth-child(3) {
padding-left: 34px;
}
.label-slider:nth-child(4) {
padding-left: 32px;
}
.label-slider:nth-child(5) {
padding-left: 32px;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
<body>
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</body>
Just replace width: 600px by max-width:600px; in container.
For the font-size, I would recommand you to set font size based in rem. and set breakpoints font-size on your html element to size as you wish. as this subject: Rem not compatible with media queries?
Ad I will also recommand you to remove container padding-left and right when you under a certain width of screen, this way, the scale will stay well align with your input.
Edit
To fix the the container label, I set them with position absolute.
First step add position relative on container:
.label-container{
position:relative;
}
Then add position: absolute on labels:
.label-slider{
position: absolute;
}
And finaly just Adjust correctly with absolute as follow:
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
DEMO FULL
#import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
#import url("https://fonts.googleapis.com/css?family=Dancing+Script");
body {
font-family: "Catamaran", sans-serif;
background: #2b8aeb;
}
.container {
font-family: "Catamaran", sans-serif;
max-width: 600px;
margin: 30px auto 0;
display: block;
background: #fff;
padding: 10px 50px 50px;
border-radius: 4px;
box-shadow 0 6px 16px rgba(0,0,0,0.15)
}
.title {
text-align: center;
font-family: "Dancing Script", cursive;
color: #3949ab;
font-size: 35px;
}
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
position : relative;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
position: absolute;
}
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
.ticks {
font-family: "Catamaran", sans-serif;
color: #3949ab;
font-size: 14px;
font-weight: 700;
display: flex;
justify-content: space-between;
height: 6px;
margin: 0 10px 0 15px;
counter-reset: count -1;
}
.ticks > div {
height: 100%;
width: 1px;
background: silver;
counter-increment: count 1;
}
.ticks > div:nth-child(5n - 4) {
height: 200%;
}
.ticks > div:nth-child(5n - 4)::before {
display: block;
content: counter(count,decimal);
transform: translate(-50%, 100%);
text-align: center;
width: 16px;
}
<body>
<div class="container">
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</div>
</body>
I've been creating a checkbox that has a custom background image. I want to hide the checkbox, but whenever I do I am unable to check it.
HTML:
<div class="arrow">
<label for="togglearrow"></label>
<input type='checkbox' id="togglearrow"/>
<div class="arrowmenu"></div>
</div>
CSS:
#togglearrow {
display: none;
cursor: pointer;
}
.arrow {
position: absolute;
display: block;
background: url('arrow.png') no-repeat;
background-size: 65%;
height: 35px;
bottom: 0;
}
.arrowmenu {
position: absolute;
background: url('test.png') no-repeat;
background-size: 65%;
height: 35px;
bottom: 0;
right: 20px;
}
label[for="togglearrow"] {
display: block;
cursor: pointer;
}
#togglearrow:checked + .arrowmenu {
display: block;
bottom: 0;
left: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I expect that the checkbox will be hidden and can still click on "tasks.png" to check the box, however, it results in the checkbox not being able to be checked.
Your <label> element doesn't have any dimensions.
Also, I am unsure which element tasks.png is referring to.
#togglearrow {
display: none;
}
.arrow {
position: relative;
display: block;
background: url('https://unsplash.it/100') no-repeat;
background-size: 65%;
height: 35px;
bottom: 0;
}
.arrowmenu {
position: absolute;
background: url('https://unsplash.it/300') no-repeat;
background-size: 65%;
height: 35px;
bottom: 0;
right: 20px;
}
label[for="togglearrow"] {
display: block;
cursor: pointer;
width: 40px;
height: 100%;
border: 1px solid yellow;
}
#togglearrow:checked + .arrowmenu {
display: block;
bottom: 0;
left: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="arrow">
<label for="togglearrow"></label>
<input type='checkbox' id="togglearrow"/>
<div class="arrowmenu"></div>
</div>
I am making a navigation menu (following a tutorial), and to make the nav-icon I apparently have to use pseudo elements. Normally that would be fine, but this time, they wont show at all...
Is there something wrong with my code/is there a better way to make the icon?
*,
*::before,
*::after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
background-color: #FFF
-webkit-font-smoothing: antialiased;
}
a {
color: hsla(37, 39%, 72%, 1.00);
text-decoration: none;
}
li{
list-style: none;
}
.header {
width: 100vw;
height: 100vh;
display: block;
background:url(img/background.jpg) no-repeat center center;
background-size: cover;
position: relative;
}
.logo {
font-size: 4em;
color: #FFF;
line-height: 1.1;
border: 1px solid #fff;
border-radius: 100%;
width: 80px;
height: 80px;
display: inline-block;
padding: 5px;
background-color: hsla(152, 40%, 20%, 1.00);
margin: 50px 0 0 50px;
cursor: pointer;
}
.nav-icon {
width: 50px;
height: 40px;
display: block;
background-color: transparent;
position: absolute;
top: 70px;
right: 50px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav-icon .icon {
width: 50px;
height: 2px;
display: block;
background-color: #333;
position: absolute;
top: 20px;
}
.nav-icon .icon::before
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
.nav-icon .icon::before {
top: -10px;
}
.nav-icon .icon::after {
top: 10px;
}
You have missed semicolon ; in some lines and comma , in
.nav-icon .icon::before ,
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
that fixes what u were looking for