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

Rearrange slider code

Browse source
This commit is contained in:
lolabird 2023-11-12 23:49:00 -07:00
commit d55c17f42c
1 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
script.js
View file

@ -12,13 +12,8 @@ let colorValue;
const backColorPicker = document.querySelector("#back-col-picker"); const backColorPicker = document.querySelector("#back-col-picker");
const transLabel = document.querySelector("#trans-label"); const transLabel = document.querySelector("#trans-label");
const transSlider = document.querySelector("#canvas-trans"); const transSlider = document.querySelector("#canvas-trans");
const reset = document.querySelector("#reset");
const rangeSlider = document.querySelector('input[type="range"]'); const rangeSlider = document.querySelector('input[type="range"]');
rangeSlider.addEventListener('input', function() { const reset = document.querySelector("#reset");
const percentage = ((rangeSlider.value - rangeSlider.min) / (rangeSlider.max - rangeSlider.min)) * 100;
rangeSlider.style.setProperty('--range-value', `${percentage}%`);
});
//the next few variables are set to be used to test if //the next few variables are set to be used to test if
@ -44,7 +39,7 @@ colorPicker.addEventListener("change", changeColor);
backColorPicker.addEventListener("input", pickBackground); backColorPicker.addEventListener("input", pickBackground);
transSlider.addEventListener("input", adjustTransparency); transSlider.addEventListener("input", adjustTransparency);
rangeSlider.addEventListener('input', changeSliderColor);
gridSlider.addEventListener("input", getGridDimensions); gridSlider.addEventListener("input", getGridDimensions);
rangeKnob.addEventListener("mousedown", (e) => { rangeKnob.addEventListener("mousedown", (e) => {
@ -153,6 +148,12 @@ function toggleGridView(gridItem) {
} }
function changeSliderColor() {
const percentage = ((rangeSlider.value - rangeSlider.min) / (rangeSlider.max - rangeSlider.min)) * 100;
rangeSlider.style.setProperty('--range-value', `${percentage}%`);
}
function pickBackground() { function pickBackground() {
const currentColor = container.style.backgroundColor; const currentColor = container.style.backgroundColor;
let num = currentColor.match(/\d+/g); let num = currentColor.match(/\d+/g);