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

Style range slider

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

8
script.js
View file

@ -14,6 +14,12 @@ const transLabel = document.querySelector("#trans-label");
const transSlider = document.querySelector("#canvas-trans"); const transSlider = document.querySelector("#canvas-trans");
const reset = document.querySelector("#reset"); const reset = document.querySelector("#reset");
const rangeSlider = document.querySelector('input[type="range"]');
rangeSlider.addEventListener('input', function() {
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
//a given button has been clicked //a given button has been clicked
@ -36,8 +42,10 @@ buttons.forEach((button) => {
colorPicker.addEventListener("input", changeColor); colorPicker.addEventListener("input", changeColor);
colorPicker.addEventListener("change", changeColor); colorPicker.addEventListener("change", changeColor);
backColorPicker.addEventListener("input", pickBackground); backColorPicker.addEventListener("input", pickBackground);
transSlider.addEventListener("input", adjustTransparency); transSlider.addEventListener("input", adjustTransparency);
gridSlider.addEventListener("input", getGridDimensions); gridSlider.addEventListener("input", getGridDimensions);
rangeKnob.addEventListener("mousedown", (e) => { rangeKnob.addEventListener("mousedown", (e) => {
document.addEventListener("mousemove", rotateKnob); document.addEventListener("mousemove", rotateKnob);

14
style.css
View file

@ -1,5 +1,6 @@
html { html {
height: 100%; height: 100%;
--range-value: 100%;
} }
body{ body{
@ -140,6 +141,7 @@ button {
height: 12px; height: 12px;
background: rgb(180, 254, 235); background: rgb(180, 254, 235);
border-radius: 6px; border-radius: 6px;
margin-bottom: 20px;
} }
input[type="range"]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
@ -154,7 +156,10 @@ input[type="range"]::-moz-range-thumb:hover {
background-color: #68ffd8; background-color: #68ffd8;
} }
input[type="range"]::-moz-range-thumb:active{ input[type="range"]::-moz-range-thumb:active{
background-color: #017070; 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%);
} }
@ -169,8 +174,11 @@ input[type="range"]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb:hover { input[type="range"]::-webkit-slider-thumb:hover {
background-color: #68ffd8; background-color: #68ffd8;
} }
input[type="range"]::-webkit-slider-thumb:active{ input[type="range"]::-webkit-slider-thumb:active {
background-color: #017070; 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%);
} }
#gridSlider { #gridSlider {