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

12
script.js
View file

@ -65,7 +65,8 @@ function resetGrid() {
colorValue = "black"; colorValue = "black";
rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`; rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`;
transSlider.value = 1; transSlider.value = 1;
//transSlider.style.backgroundColor = "rgb(180, 254, 235)"; transSlider.style.backgroundColor = "rgb(180, 254, 235)";
rangeSlider.style.setProperty('--canvas-color', "rgb(180, 254, 235)");
transLabel.textContent = transSlider.value transLabel.textContent = transSlider.value
getGridDimensions(); getGridDimensions();
@ -169,10 +170,12 @@ function pickBackground() {
b = num2[2]; b = num2[2];
a = num[3]+ "."+ num[4]; a = num[3]+ "."+ num[4];
container.style.backgroundColor = `rgba(${r},${g},${b},${a})`; container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
//transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`; transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
rangeSlider.style.setProperty('--canvas-color', `rgba(${r},${g},${b},${a})`);
} else { } else {
container.style.backgroundColor = backColorPicker.value; container.style.backgroundColor = backColorPicker.value;
//transSlider.style.backgroundColor = backColorPicker.value; transSlider.style.backgroundColor = backColorPicker.value;
rangeSlider.style.setProperty('--canvas-color', backColorPicker.value);
} }
} }
@ -206,7 +209,8 @@ function adjustTransparency() {
transLabel.textContent = a; transLabel.textContent = a;
container.style.backgroundColor = `rgba(${r},${g},${b},${a})`; container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
//transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`; transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
rangeSlider.style.setProperty('--canvas-color', `rgba(${r},${g},${b},${a})`);
} }
function colorGrid() { function colorGrid() {

5
style.css
View file

@ -1,6 +1,7 @@
html { html {
height: 100%; height: 100%;
--range-value: 100%; --range-value: 100%;
--canvas-color: rgb(180, 254, 235);
} }
body{ body{
@ -159,7 +160,7 @@ input[type="range"]::-moz-range-thumb:active{
background-color: #68ffd8; background-color: #68ffd8;
} }
input[type="range"]::-moz-range-track { 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; background-color: #68ffd8;
} }
input[type="range"]::-webkit-slider-runnable-track { 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 { #gridSlider {