OBS: Vi skal senere stå på linje 4 trykke enter og skrive slider koden ind.
Vi skal nu til at forme hjertet i CSS boksen. Vi har en hoved klasse og derefter en before og after dele.
Vi hopper op i HTML’en igen og skriver nu ind for slideren. Stil dig på den tomme linje 4 og tryk nu enter. Nu hvor du står på linje 5 skriv nu dette ind som står på billedet.
.box1 {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 600px;
background-color: white;
border-radius: 50px;
border: 5px solid grey;
}
.range-slider {
position: relative;
width: 500px;
height: 80px;
}
.range-slider_input {
width: 100%;
position: absolute;
z-index: 3;
transform: translateY(-50%);
-webkit-appearance: none;
appearance: none;
top: -30%;
width: 100%;
height: 4px;
opacity: 0;
margin: 0;
}
.range-slider_input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 100px;
cursor: pointer;
top: -30%;
border-radius: 50%;
opacity: 0;
}
.range-slider_input::-moz-range-thumb {
width: 14vmin;
height: 14vmin;
cursor: pointer;
top: -30%;
border-radius: 50%;
opacity: 0;
}
.range-slider_thumb {
width: 14vmin;
height: 14vmin;
border: 0.6vmin solid #303030;
border-radius: 50%;
position: absolute;
left: 0;
top: -30%;
transform: translateY(-50%);
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 4vmin;
color: #303030;
z-index: 2;
}
.range-slider_line {
height: 25px;
width: 100%;
background-color: #e1e1e1;
top: 50%;
transform: translateY(-50%);
left: 0;
border-radius: 50px;
position: absolute;
z-index: 1;
}
.range-slider_line-fill {
position: absolute;
height: 25px;
border-radius: 50px;
width: 0;
background-image: linear-gradient(90deg, magenta, black);
}