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 slider

Browse source
This commit is contained in:
lolabird 2023-11-12 21:08:19 -07:00
commit a347c31fb7
3 changed files with 46 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -37,7 +37,7 @@
<div class="grid-input"> <div class="grid-input">
<h3 class="tool-labels">Grid Tools</h3> <h3 class="tool-labels">Grid Tools</h3>
<label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label> <label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
<input name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1"> <input class="range-slider" name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
<div class="grid-tools"> <div class="grid-tools">
<div class="slider"> <div class="slider">
<label class="sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label> <label class="sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>

4
script.js
View file

@ -57,6 +57,7 @@ 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)";
transLabel.textContent = transSlider.value transLabel.textContent = transSlider.value
getGridDimensions(); getGridDimensions();
@ -160,8 +161,10 @@ 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})`;
} else { } else {
container.style.backgroundColor = backColorPicker.value; container.style.backgroundColor = backColorPicker.value;
//transSlider.style.backgroundColor = backColorPicker.value;
} }
} }
@ -195,6 +198,7 @@ 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})`;
} }
function colorGrid() { function colorGrid() {

44
style.css
View file

@ -45,7 +45,7 @@ footer {
flex: 0 0 auto; flex: 0 0 auto;
} }
button, .container, .color-input, .knob-shadow { button, .container, .color-input, .knob-shadow, .range-slider {
box-shadow: 1px 2px 10px 1px #555; box-shadow: 1px 2px 10px 1px #555;
} }
@ -134,6 +134,45 @@ button {
font-size: 18px; font-size: 18px;
} }
.range-slider {
appearance: none;
width: 100%;
height: 12px;
background: rgb(180, 254, 235);
border-radius: 6px;
}
input[type="range"]::-moz-range-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #f0fbf8;
cursor: pointer;
box-shadow: 1px 2px 10px 1px #555;
}
input[type="range"]::-moz-range-thumb:hover {
background-color: #68ffd8;
}
input[type="range"]::-moz-range-thumb:active{
background-color: #017070;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
background: #f0fbf8;
cursor: pointer;
box-shadow: 1px 2px 10px 1px #555;
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: #68ffd8;
}
input[type="range"]::-webkit-slider-thumb:active{
background-color: #017070;
}
#gridSlider { #gridSlider {
display: none; display: none;
} }
@ -177,8 +216,7 @@ button {
} }
.knobless-grid-tools { .knobless-grid-tools {
display: flex; display: block;
flex-direction: column;
} }
.grid-buttons { .grid-buttons {