Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dynamically change color of slider

Browse source
This commit is contained in:
lolabird 2023-11-12 22:32:22 -07:00
commit e84554b886
2 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
style.css
View file

@ -1,6 +1,7 @@
html {
height: 100%;
--range-value: 100%;
--canvas-color: rgb(180, 254, 235);
}
body{
@ -159,7 +160,7 @@ input[type="range"]::-moz-range-thumb:active{
background-color: #68ffd8;
}
input[type="range"]::-moz-range-track {
background: linear-gradient(to right, #FF0000 0%, #FF0000 var(--range-value), #00FF00 var(--range-value), #00FF00 100%);
background: linear-gradient(to right, var(--canvas-color) 0%, var(--canvas-color) var(--range-value), #bbb var(--range-value), #bbb 100%);
}
@ -178,7 +179,7 @@ input[type="range"]::-webkit-slider-thumb:active {
background-color: #68ffd8;
}
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(to right, #FF0000 0%, #FF0000 var(--range-value), #00FF00 var(--range-value), #00FF00 100%);
background: linear-gradient(to right, var(--canvas-color) 0%, var(--canvas-color) var(--range-value), #bbb var(--range-value), #bbb 100%);;
}
#gridSlider {