File size: 2,781 Bytes
d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
.slider {
min-height: 15px;
}
/* input range slider */
.slider input[type="range"] {
--value: 0%;
--lower: var(--primary);
--upper: rgba(255, 255, 255, 0.5);
--size: 5px;
--active-size: 8px;
--thumb-size: 7px;
--thumb-active-size: 10px;
--thumb-color: #fff;
cursor: pointer;
background: linear-gradient(
to right,
var(--lower) 0%,
var(--lower) var(--value),
var(--upper) var(--value),
var(--upper) 100%
);
border-radius: var(--size);
height: var(--size);
width: 100%;
outline: none;
touch-action: manipulation;
-webkit-appearance: none;
-moz-appearance: none;
transition: height ease-in-out 0.1s;
}
.slider input[type="range"]:hover,
.slider input[type="range"]:active {
height: var(--active-size);
}
/* thumb */
/* strangely I have to separate them, otherwise non of them recognizes the rule */
.slider input[type="range"]::-moz-range-thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--thumb-color);
border-radius: 100%;
cursor: pointer;
transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
}
.slider input[type="range"]:hover::-moz-range-thumb,
.slider input[type="range"]:active::-moz-range-thumb {
width: var(--thumb-active-size);
height: var(--thumb-active-size);
}
.slider input[type="range"]::-webkit-slider-thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--thumb-color);
border-radius: 100%;
cursor: pointer;
-webkit-appearance: none;
transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
}
.slider input[type="range"]:hover::-webkit-slider-thumb,
.slider input[type="range"]:active::-webkit-slider-thumb {
width: var(--thumb-active-size);
height: var(--thumb-active-size);
}
.slider input[type="range"]::-ms-thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--thumb-color);
border-radius: 100%;
cursor: pointer;
transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
}
.slider input[type="range"]:hover::-ms-thumb,
.slider input[type="range"]:active::-ms-thumb {
width: var(--thumb-active-size);
height: var(--thumb-active-size);
}
/* edge */
.slider input[type="range"]::-ms-track {
background: transparent;
border-color: transparent;
border-width: var(--size) 0;
color: transparent;
width: 100%;
height: var(--size);
cursor: pointer;
transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
}
.slider input[type="range"]::-ms-fill-lower,
.slider input[type="range"]:focus::-ms-fill-lower {
background: var(--lower);
border-radius: var(--size);
}
.slider input[type="range"]::-ms-fill-upper,
.slider input[type="range"]:focus::-ms-fill-upper {
background: var(--upper);
border-radius: var(--size);
}
|