Witam,
Jak zrobić, żeby po odświeżeniu strony wszystko się zapisywało?
Przykład: Ustawienia z gry, nie chcemy żeby po odświeżeniu strony nasze ustawienia się resetowały tylko, żeby zostały takie jakie ustawiliśmy
p {
margin-top: 50px;
opacity: 0.7;
}
.slider1::after {
content: '100';
color: #fff;
font-size: 16px;
position: absolute;
left: 80%;
top: 26%;
}
.slider1::before {
content: '0';
color: #fff;
font-size: 16px;
position: absolute;
left: 12%;
top: 26%;
}
.slider1 {
-webkit-appearance: none;
width: 280px;
height: 8px;
background-color: linear-gradient(90deg, rgb(214, 214, 214)20%, rgb(214, 214, 214)20%);
outline: none;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
margin-left: 15px;
}
.slider1::-webkit-slider-thumb {
-webkit-apearance: none;
appearance: none;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.slider1::-moz-range-thumb {
-webkit-apearance: none;
appearance: none;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
<input type="range" min="50" max="200" step="10" value="50" id="my-range" class="slider1">
<p>Value: <span id="value"></span></p>
var slider = document.getElementById("my-range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
slider.addEventListener("mousemove", function() {
var x = slider.value;
var color = 'linear-gradient(90deg, rgb(0, 140, 255)' + x + '%, rgb(214, 214, 214)' + x + '% )'
slider.style.background = color;
});
np slider, checkbox itp.