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">
<h3 class="tool-labels">Grid Tools</h3>
<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="slider">
<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";
rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`;
transSlider.value = 1;
//transSlider.style.backgroundColor = "rgb(180, 254, 235)";
transLabel.textContent = transSlider.value
getGridDimensions();
@ -160,8 +161,10 @@ function pickBackground() {
b = num2[2];
a = num[3]+ "."+ num[4];
container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
//transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
} else {
container.style.backgroundColor = backColorPicker.value;
//transSlider.style.backgroundColor = backColorPicker.value;
}
}
@ -195,6 +198,7 @@ function adjustTransparency() {
transLabel.textContent = a;
container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
//transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
}
function colorGrid() {

44
style.css
View file

@ -45,7 +45,7 @@ footer {
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;
}
@ -134,6 +134,45 @@ button {
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 {
display: none;
}
@ -177,8 +216,7 @@ button {
}
.knobless-grid-tools {
display: flex;
flex-direction: column;
display: block;
}
.grid-buttons {